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

Question

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

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

// First Screen

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

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

// 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 确保第二个屏幕已完全卸载？

Answer 1

你能试试这样清除数据吗

 import { useIsFocused } from '@react-navigation/native'; const focused = useIsFocused() useEffect(()=>{ if(focused){ dispatch(clearAllData()); } },[focused])