如何解决未为 deepLink 调用 useEffect 中的函数
下午好我正在尝试使用 react router flux 为 react native 设置 deepLinking，但似乎我的 useEffect 中的函数没有运行。我相信这可能是因为它没有正确地获得状态。当我访问 flow_id 的 URL 时，它只是在 UI 中呈现我在 URL 中放置的内容，但该函数没有运行。它应该将 flow_id 与 scene_key 匹配，并使用适当的流和子流打开场景。任何指导将不胜感激。
import React,{ useEffect } from 'react';
import { Linking,View,Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { useSelector,usedispatch } from 'react-redux';
import Router from '../Router';
import reducers from '../reducers';
import * as ActionCreators from '../actions';
import * as Globals from '../library/utils/globals';
import {
selectFlow,flowsFetch,subFlowsFetch,} from '../actions';
const DeepLink = (props) => {
useEffect(() => {
const onDeepLink = (url) => {
const dispatch = usedispatch();
const allFlows = useSelector(
(state) => state.flows.all
);
console.log(props.flow_id);
console.log('[DeepLink] onDeepLink: ',url);
const flow = allFlows.filter((obj) => {
return obj.key === url.key;
});
dispatch(flowsFetch());
if (
allFlows.getState().app_bootstrap.completed === true
) {
console.log('[DeepLink] bootstrap completed!');
Actions.reset('mainTabs');
if (url.hasOwnProperty('scene_key')) {
console.log('[DeepLink] scene_key exists');
console.log(
'[DeepLink] flow key: ',url.flow_key
);
// Check if Deepline is a defined flow
if (
(props.flow_id === url.scene_key) ===
'flowDescription' &&
url.flow_key !== undefined
) {
console.log('[DeepLink] scene_key is a flow!');
console.log(
'[DeepLink] # of flows with matching key in store: ',flow.length
);
// If no flows of matching key found,wait for database fetch
if (flow.length == 0) {
console.log(
'[DeepLink] flow not found locally; starting timer...'
);
dispatch(flowsFetch());
Actions.reset('notificationLoader',{
parameters: url,});
// Timer to wait for update to flows
setTimeout(() => {
// Check for flows in updated store
const updatedAllFlows = allFlows.getState()
.flows.all;
const updatedFlow = updatedAllFlows.filter(
(obj,index) => {
return obj.key === url.flow_key;
}
);
// If flow still not found,go home
if (updatedFlow.length == 0) {
console.log(
'[DeepLink] desired flow still not found; returning to home screen'
);
Actions.reset('mainTabs');
} else {
console.log(
'[DeepLink] timer ended -- flow successfully fetched!'
);
}
},5000);
} else {
console.log('[DeepLink] flow found locally!');
// Go to selected flow
dispatch(selectFlow(flow[0]));
dispatch(
subFlowsFetch(
flow[0].flow_key,(sub_flows) => {
Actions.flowDescription({
flowCategory: flow[0].flow_categories,title: flow[0].label,duration: url.duration,imageUri: flow[0].image_uri,lock: url.lock,dynamicPacingSupport:
url.dynamic_pacing_support,choiceSupport: url.choice_support,sub_flows,flow: flow[0],});
}
)
);
}
// Check if DeepLink is an undefined flow
} else if (
url.scene_key === 'flowDescription' &&
url.flow_key === undefined
) {
console.log(
'[DeepLink] Error: flow key is undefined'
);
// DeepLink is not a flow
} else {
console.log(
'[DeepLink] scene_key is NOT a flow: ',url.scene_key
);
// Try to go to screen specified by scene_key
try {
Actions[url.scene_key]();
} catch (err) {
console.log(
'[DeepLink] Error: invalid scene_key'
);
}
}
} else {
console.log(
'[DeepLink] scene_key does not exist'
);
}
} else {
console.log('[DeepLink] bootstrap not completed!');
if (
url.hasOwnProperty('scene_key') &&
url.scene_key !== 'flowDescription'
) {
setTimeout(() => {
if (
allFlows.getState().app_bootstrap
.completed === true
) {
console.log(
'[DeepLink] bootstrap completed for screen: ',url.scene_key
);
try {
Actions[url.scene_key]();
} catch (err) {
console.log(
'[DeepLink] Error: invalid scene_key'
);
}
}
},2000);
} else if (
url.hasOwnProperty('scene_key') &&
(props.flow_id === url.scene_key) ===
'flowDescription'
) {
setTimeout(() => {
if (
allFlows.getState().app_bootstrap
.completed === true
) {
// Check for flows in updated store
const bootstrap_updatedAllFlows = allFlows.getState()
.flows.all;
const bootstrap_updatedFlow = bootstrap_updatedAllFlows.filter(
(obj,index) => {
return obj.key === url.flow_key;
}
);
// If flow still not found,go home
if (bootstrap_updatedFlow.length == 0) {
console.log(
'[DeepLink] desired flow still not found; returning to home screen (2)'
);
Actions.reset('mainTabs');
} else {
console.log(
'[DeepLink] timer ended -- flow successfully fetched! (2)'
);
}
}
},5000);
}
}
};
},[]);
console.log(props.flow_id);
// Handle DeepLink
return (
<View>
<Text>{props.flow_id}</Text>
</View>
);
};
export default DeepLink;
解决方法
我无法完全理解您在 useEffect 中尝试做什么，但是如果您尝试对 props.flow_id 中的更改做出反应，请将其添加到 useEffect 中的数组中，如下所示：
useEffect(()=>{
//your code here
},[props.flow_id])
这样 useEffect 函数会在 props.flow_id 改变时运行。
此外，看起来您只是在 useEffect 中声明了该函数，而不是调用它。如果您希望它在值更改时运行，请在其他地方定义该函数，并在您的 useEffect 中像这样调用它。
const myComponent =(props) => {
const onDeepLink = (url) => {
//your function code
}
useEffect((url) => {
onDeepLink(url);
},[onDeepLink]);
return(<View/>)
}我不确定“url”变量的来源，但您还需要将 is 添加到 useEffect 的数组中。
您可能还想看看这个链接： https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
,需要定义单独的函数定义，并在 useEffect 中传递函数。
这是可能的解决方案
useEffect(() => {
abc();
},[dependency])
const abc = () => {
///function defination
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
