You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native Navigation中useFocusEffect在goBack前触发的问题解决

React Native Navigation + Redux 页面回退时数据清除时机问题

我基于react-native-navigation和Redux实现了一个包含两个页面的Stack Navigator,第二个页面会用到首个页面存在Redux中的部分数据。为了在重新聚焦到首个页面时清空相关数据,我在首个页面的useFocusEffect钩子中加入了数据重置逻辑:

// 首个页面
useFocusEffect(
  useCallback(() => {
    dispatch(clearAllData());
  }, []);
);

但调用navigation.goBack()返回首个页面时,数据会在第二个页面完全卸载前就被清除,导致第二个页面触发错误:

// 第二个页面
const some_params = useSelector(state => state.data.some_params);

// 错误:无法读取null的"some_params"属性

我尝试过给dispatch(clearAllData())添加短暂延时,虽然能临时解决问题,但并非合理方案;也可以使用可选链state?.data?.some_params规避错误,但需要在所有用到该数据的地方都修改,操作繁琐。

有没有办法确保在第二个页面完全卸载后,再触发clearAllData()?


补充尝试
我试过useIsFocused和navigation.pop(),都没达到预期效果。最终找到使用InteractionManager.runAfterInteractions的解决方案:

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

    return () => task.cancel();
  }, [])
);

内容的提问来源于stack exchange,提问作者Michele

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.23 07:09:12