useEffect中的函数未被deepLink调用

Question

下午好，我正试图使用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;

Answer 1

您需要定义一个单独的函数定义，并在useEffect中传递函数。

以下是的可能解决方案

useEffect(() => {
abc();
}, [dependency])
const abc = () => {
///function defination

}

Answer 2

我无法完全理解你试图在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-通过跳过效果优化性能