使用React Hooks的生命周期问题

debugcn 发表于 Dev

阿拉斯托

我的用户状态

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（调用fetch方法，checkIfUserIsEnabled）

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

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

我的问题：user.enabled即使setUser在useEffect中调用的状态将状态更新为true，也要在导致的状态始终为false之前调用return方法user.enabled。

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

伊斯兰·阿布·休加尔

首先，您要调用异步函数，这些函数将不会按的相同顺序执行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>
    )