在 goBack 之前触发本机导航 useFocusEffect 反应答案

【问题标题】：react native navigation useFocusEffect triggered before goBack在 goBack 之前触发本机导航 useFocusEffect 反应
【发布时间】：2022-08-16 16:17:30
【问题描述】：

我使用 react-native-navigation 和 redux。我有一个带有两个屏幕的 Stack Navigator。

第二个屏幕使用了第一个屏幕存储在 redux 中的一些数据。第一个屏幕有一个函数可以在 useFocusEffect 挂钩中重置该数据，因此当焦点回到第一个屏幕上时，所有数据都将被删除。

// First Screen

useFocusEffect(
   useCallback(() => {
      dispatch(clearAllData());
    }, []);
);

问题是，如果我尝试使用 navigation.goBack() 返回第一个屏幕，数据会在第二个屏幕完全卸载之前被清除，并且会引发错误。

// Second Screen
const some_params = useSelector(state => state.data.some_params);

// error: can\'t read property \"some_params\" of null

我尝试在 dispatch(clearAllData()) 上添加一点超时并且它有效，但我认为这不是一个有效的解决方案。

我可以使用像 state?.data?.some_params 这样的可选链接，但我必须在任何地方都使用它。

是否可以触发 clearAllData 确保第二个屏幕已完全卸载？

编辑

我已经尝试过 useIsFocused 和 navigation.pop() 但它们都没有按预期工作。

最后我找到了使用 InteractionManager.runAfterInteractions 的解决方案

useFocusEffect(
  useCallback(() => {

    const task = InteractionManager.runAfterInteractions(() => {
      dispatch(clearAllData());
    });

    return () => task.cancel();

  }, [])
);

你能试试 navigation.pop() 而不是 goBack

标签： reactjs react-native redux react-native-navigation

【解决方案1】：

您可以尝试像这样清除数据吗

import { useIsFocused } from '@react-navigation/native';

const focused = useIsFocused()

    useEffect(()=>{
        if(focused){
            dispatch(clearAllData());
        }
    },[focused])

【讨论】：