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

mitkmikd  于 2022-11-12  发布在  Go
关注(0)|答案(1)|浏览(112)

我使用react-native-navigation和redux。我有一个带有两个屏幕的堆栈导航器。
第二个屏幕使用了第一个屏幕在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

我试着在分派(clearAllData())上添加一点超时,它起作用了,但我不认为这是一个有效的解决方案。
我可以使用像state?.data?.some_params这样的可选链接,但我必须在任何地方使用它。
是否可以在确保第二个屏幕已完全卸载的情况下触发clearAllData?

编辑

我已经尝试了useIsFocused和navigation.pop(),但是它们都没有像预期的那样工作。
最后我找到了一个使用InteractionManager的解决方案。

useFocusEffect(
  useCallback(() => {

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

    return () => task.cancel();

  }, [])
);
66bbxpm5

66bbxpm51#

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

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

const focused = useIsFocused()

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

相关问题