Question

在主要的import numpy组件中，我正在尝试更新状态

App.js

根据给定的本地存储令牌加载用户时为true。

const[isAuthenticated, setIsAuthenticated] = useState(false)

作为回报，我正在渲染一个私有组件...

useEffect(() => {
  const loadUser = async () => {
    await fetch('http://localhost:5000/api/auth', {
      method: 'GET',
      headers: {
        'x-auth-token': localStorage.token,
      },
    });

    setIsAuthenticated(true);
  };
  
  loadUser();
}, []);

我的<PrivateRoute exact path='/upload' component={Upload} isAuthenticated={isAuthenticated} />文件看起来像这样...

PrivateRoute.js

通过将const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => ( <Route {...rest} render={(props) => isAuthenticated ? <Component {...props} /> : <Redirect to='/login' /> } /> );作为对我的isAuthenticated组件的支持，我想应该将PrivateRoute更新为isAuthenticated。我通过检查从请求中获得的数据来检查是否正确地加载了用户，实际上我得到了用户，并且true被调用了

但是，当我在加载用户后尝试检查setIsAuthenticated中的isAuthenticated是PrivateRoute时是isAuthenticated

我不确定为什么会这样，真的会感谢您的帮助和解释。

我的App.js文件如下所示...

false

Answer 1

尽量不要在传递的回调函数中使用道具。

像这样立即使用道具：

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => {
  return isAuthenticated ? (
    <Route {...rest} render={(props) => <Component {...props} />} />
  ) : (
    <Route {...rest} render={(props) => <Redirect to="/login" />} />
  );
};

或使用带有依赖项的useCallback创建回调函数：

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => {
  const component = useCallback(
    (props) => {
      isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />;
    },
    [isAuthenticated]
  );
  return <Route {...rest} render={component}/>
};

Answer 2

对于此类问题，redux是最佳解决方案

在您的app.js分派操作中设置isAuthenticate标志

store.dispatch(setIsAuthenticated(true))

在其他需要isAuthenticate的文件中，只需使用

mapStateToProps

React中的状态未按预期更新

2 个答案: