时间戳

首页 > 解决方案 > 当 Redux 状态更改时，React Native 未安装的屏幕呈现

react-native - 当 Redux 状态更改时，React Native 未安装的屏幕呈现

问题描述

我将 React Native 与 Redux 一起使用。目前我有两个使用相同 redux 状态的屏幕。两个屏幕都在一个堆栈导航上。当 redux 状态改变时，第一个屏幕中有一个使用效果调用。同样的一个使用效果调用也在第二个屏幕中，当相同的 redux 状态改变时触发。问题是当我从屏幕 1 导航到屏幕 2 并更改状态时，它会触发两种使用效果。

这是第一个屏幕。我正在使用 navigation.navigate('LoginScreen') 导航到第二个屏幕

export default function StartScreen({route, navigation, props}) {
  const {loginStatus,user} = useSelector(state => state.auth);

const initialRender = useRef(true);
  useEffect(() => {
    console.log('use effect');
    if (!initialRender.current) {
      if (loginStatus === 'success') {
        hideDialog();
        navigation.reset({
        index: 0,
        routes: [{name: 'Dashboard'}],
        });
      } else if(loginStatus === 'failed') {
        alert('invalid QR code!')
        hideDialog();
        dispatch(clearLoginStatus())
      }
    } else {
      initialRender.current = false;
    }
  }, [loginStatus]);

return (
    <Background maxWidth="85%">
      <VectorHeading
        img={require('../assets/startvector.png')}
        marginBottom={50}
      />
      <Header>xxxxxxx</Header>
      <Paragraph>
        The easiest way to start with your amazing application.
      </Paragraph>
      <Button mode="contained" onPress={() => navigation.navigate('QRScanner')}>
        Scan QR
      </Button>
      <Button mode="contained" onPress={() => navigation.navigate('LoginScreen')}>
        Login
      </Button>

      <Loader visible={visible} hideDialog={hideDialog} />
    </Background>
  );

.........

这是第二屏

export default function LoginScreen({navigation, props}) {
  ....
  const {isLoggedIn, loginStatus,user} = useSelector(state => state.auth);
  

const initialRender = useRef(true);
  useEffect(() => {
    console.log('use effect');
    if (!initialRender.current) {
      if (loginStatus === 'success') {
        hideDialog();
        forward();
      } else if(loginStatus === 'failed') {
        alert('invalid credentials!')
        hideDialog();
        dispatch(clearLoginStatus())
      }
    } else {
      initialRender.current = false;
    }
  }, [loginStatus]);

.........

当“loginStatus”更改时，它会在两个屏幕中呈现 useefect 函数并显示在 useeffect 中设置的两个警报。

任何帮助将不胜感激。

标签： react-nativereact-reduxreact-native-navigation

解决方案

尝试在组件卸载时添加另一个 useEffect 来清理，

useEffect(() => {
 return () => {
   console.log("cleaned up");
 };
}, []);

推荐阅读