React Native Navigation中useFocusEffect在goBack前触发的问题解决
我基于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
相关产品推荐
相关产品推荐

