Проблема жизненного цикла с использованием React Hooks

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

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

Моя проблема: заключается в том, что метод return вызывается до состояния, в результате чего user.enabled всегда становится ложным, даже если setUser, вызываемый в useEffect, обновил состояние user.enabled доtrue.

Как мне обновить состояние перед тем, как перейти к рендеру?

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 (
        
           {` Result is ${user.enabled}`}
           

           Current User State:
           {JSON.stringify(usre)}

)

теперь вам легче отлаживать и чище читать