React Native中useSelector在容器组件中不更新状态的问题

开发React Native应用时，使用useSelector获取Redux状态做条件渲染遇到异常：状态更新后，useSelector返回的变量未同步变化，始终停留在加载分支，必须刷新应用才能跳转到目标页面。尝试过直接返回组件或用useEffect配合useState存渲染内容，都没解决问题。

组件代码 #

const ContainerA = ({ navigation }) => {

    const {
        loginSuccess,
        loginLoading,
        accountType,
        permissionsSuccess,
        permissionsLoading,
    } = useSelector((state) => state.accountInfo);

    const [toRender, setToRender] = useState(null);

    useEffect(() => {

        if (loginSuccess) {
            if (loginSuccess.success === 1 && accountType === 3) {
                console.log('[Container] case 1');

                setToRender(<PageA navigation={navigation} />);
                // return <PageA navigation={navigation} />;
                // return;
            } else if (
                (loginSuccess.success === 1 &&
                (accountType === 1 || accountType === 2)) || (loginSuccess.success === 0)
            ) {
                console.log('[Container] case 2');
                navigation.navigate(SCREENS.CONTROL_PANEL);
            }
        } else if (loginLoading || permissionsLoading) {
            console.log('[Container] case 4');
            setToRender(<LoadingPage />);
            // return <LoadingPage />;
            // return;
        }
    }, [
        loginSucess, // 拼写错误：应为loginSuccess
        loginLoading,
        accountType,
        navigation,
        permissionSuccess, // 拼写错误：应为permissionsSuccess
        permissionsLoading,
    ]);

    return toRender;
};

export default ContainerA;

Redux Reducer代码 #

case 'loginInit':
            return updateState(state, {
                loginLoading: true,
                loginSuccess: null,
                loginFail: null,
            });
        case 'loginSuccess':
            return updateState(state, {
                loginLoading: false,
                loginSuccess: action.success,
            });
        case 'loginFail':
            return updateState(state, {
                loginLoading: false,
                loginFail: action.error,
            });
        case 'permissionsInit':
            return updateState(state, {
                permissionsLoading: true,
                accountType: null,
                permissionsSuccess: null,
                permissionsFail: null,
            });
        case 'permissionsSuccess':
            return updateState(state, {
                permissionsLoading: false,
                permissionsSuccess: action.success,
                accountType: action.success.success
                    ? action.success.success
                    : action.success.errors,
            });
        case 'permissionsFail':
            return updateState(state, {
                permissionsLoading: false,
                permissionsFail: action.error,
            });

updateState函数 #

export const updateState = (state, updatedProps) => ({
    ...state,
    ...updatedProps,
});

• 修复useEffect依赖拼写错误
  依赖数组里的loginSucess少了字母c、permissionSuccess少了字母s，这会导致useEffect无法在对应状态更新时触发，是核心问题之一，修正为loginSuccess和permissionsSuccess即可。

• 不要用useState存储React组件
  直接在组件返回值里做条件渲染，避免状态更新滞后：

  const ContainerA = ({ navigation }) => {
      const {
          loginSuccess,
          loginLoading,
          accountType,
          permissionsSuccess,
          permissionsLoading,
      } = useSelector((state) => state.accountInfo);
  
      // 单独用useEffect处理导航逻辑
      useEffect(() => {
          if (loginSuccess) {
              const shouldNavigate = 
                  (loginSuccess.success === 1 && (accountType === 1 || accountType === 2)) 
                  || loginSuccess.success === 0;
              if (shouldNavigate) {
                  navigation.navigate(SCREENS.CONTROL_PANEL);
              }
          }
      }, [loginSuccess, accountType, navigation]);
  
      // 直接条件渲染
      if (loginLoading || permissionsLoading) {
          return <LoadingPage />;
      }
  
      if (loginSuccess?.success === 1 && accountType === 3) {
          return <PageA navigation={navigation} />;
      }
  
      // 默认返回加载页，避免初始状态返回null
      return <LoadingPage />;
  };
  
  export default ContainerA;
  

• 确保状态判断时机正确
  从Reducer逻辑看，accountType是在permissionsSuccess时才设置的，所以可以在条件里加上permissionsSuccess的判断，避免accountType为null时进入错误分支：

  if (loginSuccess && permissionsSuccess) {
      // 这里再处理accountType相关逻辑
  }
  

• 添加日志排查状态变化
  在组件里添加日志，确认useSelector是否正确获取到更新后的状态：

  useEffect(() => {
      console.log('Redux状态更新:', {
          loginSuccess,
          loginLoading,
          accountType,
          permissionsSuccess,
          permissionsLoading
      });
  }, [loginSuccess, loginLoading, accountType, permissionsSuccess, permissionsLoading]);
  

内容的提问来源于stack exchange，提问作者gusti