如何在useEffect中更新状态的条件组件中有条件地渲染？

debugcn 发表于 Dev

康齐262

在react中，我有一个私有路由组件，该组件的isAuthenticated状态值用于呈现要包装的组件或重定向回我的登录页面。

为了检测刷新并执行身份验证检查，我添加了一个useEffect挂钩，希望可以检查身份验证状态，然后进行update isAuthenticated，然后返回组件或进行相应的重定向。

const PrivateRoute: React.FC<IPrivateRouteProps> = (props) => {
    const dispatch = useDispatch();
    const [isAuthenticated, setIsAuthenticated] = React.useState(false);

    useEffect(() => {
        authService.getIdentity().then(response => {
            if (response) {
                dispatch(signIn(new Identity(response.account)));
                setIsAuthenticated(true);
            } else {
                setIsAuthenticated(false);
            }         
        });
    }, [])

    return isAuthenticated ? (
        <Route {...props} component={props.component} render={undefined} />
    ) : (
        <Redirect to={{ pathname: props.redirectPath }} />
    );
};

不幸的是，这不起作用，我不确定为什么或如何解决它。

isAuthenticated呈现时的值始终为false，并且在控制台中出现以下错误...。

index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in PrivateRoute (at App.tsx:23)

我可以确认它确实流向了，setIsAuthenticated(true)但这从没有反映在isAuthenticated渲染之前的值中。

我如何/应该解决这个问题？

谢谢，

马巴哈莫

我认为问题在于代码第一次运行时，它使用isAuthenticated false评估渲染，然后使用useEffect并尝试更新值，但是您已经被重定向到另一页了。

我建议使用另一个变量来了解身份验证是否已通过，并且仅在身份验证完成后才继续。

const PrivateRoute: React.FC<IPrivateRouteProps> = (props) => {
    const dispatch = useDispatch();
    const [loading, setLoading] = React.useState(true);
    const [isAuthenticated, setIsAuthenticated] = React.useState(false);

    useEffect(() => {
        authService.getIdentity().then(response => {
            if (response) {
                dispatch(signIn(new Identity(response.account)));
                setIsAuthenticated(true);
            } else {
                setIsAuthenticated(false);
            }
            setLoading(false);         
        });
    }, [])

    if (isLoading) {
        //we are not ready yet
       return null;
    }

    return isAuthenticated ? (
        <Route {...props} component={props.component} render={undefined} />
    ) : (
        <Redirect to={{ pathname: props.redirectPath }} />
    );
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。