useEffect中的useState不更新状态

Question

我不熟悉React钩子和React 16.13.1。

我将实现能够处理登录的Auth组件。

但是它似乎没有正确更新状态电流用户，即使setMONtUser使用响应对象调用。

这个代码有什么问题？

import React, { useState, useEffect } from "react";
import { Route, Redirect } from "react-router-dom";
import { checkLoggedIn } from "utils/Api";

export const Auth = (props) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  console.log(currentUser);

  useEffect(() => {
    const f = async () => {
      setIsLoading(true);
      console.log(isLoading);
      const res = await checkLoggedIn();
      if (!!res) { // ==> true
        setCurrentUser(res);
        console.log(currentUser); // ==> null!
      }
      setIsLoading(false);
    };
    f();
  });

  if (isLoading) {
    return <div>loading</div>;
  }

  console.log(currentUser); // ==> null!
  return !!currentUser ? (
    <Route children={props.children} />
  ) : (
    <Redirect to={"/login"} />
  );
};

Answer 1

匿名用户

因为@GermaneCobar已经应答了setCurrentUser异步更新状态。因此，您需要使用仅包含当前用户的依赖项列表来获得最新状态值。

然而，对于您的用例，您只关心当前用户是否真实，并基于此您希望将用户重定向到所需页面。因此，您不需要另一个useffect，因为您不会基于当前用户执行任何其他副作用。

在真实场景中，您希望显示加载/启动屏幕，直到您能够确定用户是否经过身份验证。因此，一旦异步任务完成，您应该将isload的初始值更改为true，并将状态更改为false。我建议您将州名称重命名为：

const[shouldCheckLogin，setShouldCheckLogin]=useState（true）。

最后，！！null为false，而！！{}为true。对于对象的值，可以使用null初始化它们。

console.log(!!null)
console.log(!!{})

Answer 2

由于React中设置状态的异步性质，调用状态设置器（setCurrentUser）可能会出现问题。我还没有找到任何明确的答案，当我使用React时，它是否与setState或sync异步。在我看来，在如此复杂的情况下，最好的解决方案就是使用类。它将为您提供许多使用钩子无法复制的生命周期方法，并且更适合于auth组件。React钩子并不是所有情况下类的替代品，它只是一种工具，允许您在只需要进行简单改进的同时不破坏现有代码。

Answer 3

setCurrentUser以异步方式更新状态，因此之后不能立即使用。

但是，您可以使用另一个useffect来了解状态何时更改：

useEffect(() => {
  // currentUser changed
}, [currentUser])

我还注意到，您没有将空数组传递给您已经拥有的useEffects，因此每次更新组件时都会触发它。如果您只需要执行您的useEffects一次，您必须将空数组作为第二个参数传递，如下所示：

  useEffect(() => {
    const f = async () => {
      // ...
    };
    f();
  }, []);