redux React Native useSelector未更新容器中的状态

ttcibm8c  于 2022-11-12  发布在  React
关注(0)|答案(1)|浏览(202)

我正在开发一个React Native应用程序,在基于Redux状态的条件渲染方面遇到了一些问题,我使用useSelector获取了Redux状态。
我已经尝试了使用和不使用下面的useEffect(所以直接返回组件而不是设置状态),但是从useSelector返回的变量在状态更新时似乎没有变化,因为状态是在第一次加载的,所以最后的结果是else if,然后卡在那里。然后我必须刷新应用程序才能获得实际值,并到达所需的屏幕

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,
        loginLoading,
        accountType,
        navigation,
        permissionSuccess,
        permissionsLoading,
    ]);

    return toRender;
};

export default ContainerA;

Redux减速器

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,
            });

更新状态函数:

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

iyfamqjs1#

看起来我在一个不应该得到任何成功响应的地方执行了执行检查的函数。我通过在导航器中调用那些我确信有令牌的函数来修复这个问题,因为这些调用需要令牌(没有令牌就不会执行实际的API调用)。ContainerA中剩余的代码是:

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

    if (firstLoginSuccess) {
        if (firstLoginSuccess.success === 1 && accountType === 3) {
            return <FirstTimeLoginPage navigation={navigation} />;
        } else if (
            (firstLoginSuccess.success === 1 &&
                (accountType === 1 || accountType === 2)) ||
            firstLoginSuccess.success === 0
        ) {
            navigation.navigate(SCREENS.CONTROL_PANEL);
        }
    } else if (firstLoginLoading || permissionsLoading) {
        console.log('[FirstTimeLoginContainer] case 4');
    }

    return <LoadingPage />;

相关问题