Question

我有点被困在这里，希望能得到一些帮助，因为我尝试过的其他方法都没有奏效。

应用程序屏幕的结构如下所示，其中带有topTabNavigator。

 - Active contracts
 - Ended contracts
 - Current contracts //has a FlatList here
      -Preview contract details //separate screen inside the same stack

我要做的所有事情就是从Current contracts标签FlatList中选择一个现有合同，导航到Preview contract details，点击返回导航并回到Current contracts屏幕上实现了“焦点”监听器。

问题：当我从Current contracts移至Preview contract details时，它工作正常，但是 当按下向后箭头以返回到时， Current contracts 它会显示以下错误。 。在Preview contract details屏幕上。

TypeError：undefined不是对象（正在评估 'state.payload.find'）

还有警告

要修复，请取消所有'useEffect中的订阅和异步任务清理功能”

当我尝试实现清理功能时，我的代码看起来像这样，该功能仅在向前导航时有效，而在返回屏幕后会失败。

Currentcontracts.js

const Currentcontracts = ({ navigation }) => {

    const { state, getListDetails } = useContext(newContext);
    useEffect(() => {
        getListDetails();

        const listner = navigation.addListener('focus', () => {
            getListdetails();
        })

        return listner;

    }, []);

    return (
        <View style={styles.indStyle}>
            {!state.payload ? <MyLoader /> :
                <FlatList
                    data={state.payload}
                    renderItem={({ item }) =>
                        <Text>{item.name}</Text>
                 }
                 />
             }
        </View>)
};
export default Currentcontracts;

Previewcontractdetail.js

const Previewcontractdetails = ({ route, navigation }) => {
    const { itemId } = route.params;
    const { state } = useContext(Context);

    const jobExpander = state.payload.find((jobExpander) => jobExpander.id === itemId)

    return (<View>{jobExpander.jobId}</View>);

export default Previewcontractdetails;

返回原始屏幕时，React Navigation失败

0 个答案: