Question

我的用户状态

const [user, setUser] = useState({});

获取功能

    async function checkIfUserIsEnabled() {
        let URL = `http://localhost:8080/users/finduserbytoken?id=`;
        const res = await fetch(URL);
        res.json()
           .then(res => setUser(res))
           .catch(err => setErrors(err));
      }

useEffect （调用提取方法checkIfUserIsEnabled）

    useEffect(() => {
        verifyEmail(getTokenIdFromURL);
        checkIfUserIsEnabled();
        return () => {
            /* */
        };
    }, []);

返回

    return (
        <div className="emailVerificationWrapper">
        {user.enabled ? <h1>Result is true!</h1> : <h1>Result is false</h1>}
        </div>
    )

我的问题：即使在useEffect中调用的user.enabled更新了状态后，也会在导致setUser始终为假的状态之前调用return方法。 user.enabled为真。

如何在进入渲染之前更新状态？

Answer 1

首先，您要调用异步函数，这些函数将不会在useEffect上以相同顺序执行，因此我建议您对函数进行一些清理：

const checkIfUserIsEnabled = (user) => {
  if (user)
    setUser({ enabled: true, ...user })
}
const getUser = () => {
  let URL = `http://localhost:8080/users/finduserbytoken?id=`;
  const res = await fetch(URL);
  const user = res.json()
  checkIfUserIsEnabled(user)
}


useEffect(() => {
  verifyEmail(getTokenIdFromURL)
    .then(verified => {
      getUser()
    })
}, []);


  return (
        <div className="emailVerificationWrapper">
           <h1>{` Result is ${user.enabled}`}</h1>
           <br/>
           <div>Current User State:</div>
           <pre>{JSON.stringify(usre)}</pre>
        </div>
    )

现在，您可以更轻松地进行调试，更容易阅读

使用React Hooks的生命周期问题

1 个答案: