Reactjs 如何在状态更新为useEffect的react组件中有条件地呈现？

在react中，我有一个私有路由组件，它有一个

isAuthenticated

状态值，用于呈现它正在包装的组件，或者重定向回我的登录页面

为了检测刷新并执行身份验证检查，我添加了一个

useffect

钩子，希望可以检查身份验证状态，然后更新

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

我可以确认它确实流向

setIsAuthenticated（true）

，但在渲染之前，

isAuthenticated

的值从未反映出这一点

我该如何解决这个问题

---

谢谢，

如您所见，

无法对未安装的组件执行React状态更新。

。 为了防止这个问题，你能试着像这样把

和

放在

里面吗

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

返回是否已验证？(
) : (
);

我认为问题在于，第一次运行代码时，它使用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 }} />
    );
};

const privaterote:React.FC=（道具）=>{
const dispatch=usedpatch（）；
常量[loading，setLoading]=React.useState（true）；
const[isAuthenticated，setIsAuthenticated]=React.useState（false）；
useffect（（）=>{
authService.getIdentity（）.then（响应=>{
如果（答复）{
派遣（签到（新身份（response.account））；
setIsAuthenticated（真）；
}否则{
setIsAuthenticated（假）；
}
设置加载（假）；
});
}, [])
如果（孤岛加载）{
//我们还没有准备好
返回null；
}
返回是否经过验证(
) : (
);
};

很有趣。这确实有效，但我只需要弄清楚怎么做。我以前从未在react函数组件中看到过钩子或方法之外的if语句。因此，首次加载组件时，在

useffect

中的异步操作完成之前，它将从

if（isload）

返回

null

。异步操作完成后，

load

更改为

false

时，是否再次选中

if（isload）

？助教

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