在“useEffect”函数中使用“useState”函数

Question

我正在尝试使用useStateinside useEffect。我想访问和修改它内部的状态（useEffect），这里命名为isAuth并根据新状态渲染组件。

import React, { useState, useEffect } from 'react';

const Authentication = () => {
    const [isAuth, setIsAuth] = useState(false);

    useEffect(() => {
        console.log(isAuth);
        setIsAuth(true);
        console.log(isAuth);
    }, [isAuth]);
    return <div>{isAuth ? <p>True</p> : <p>False</p>}</div>;
};

export default Authentication;

事情是在控制台中我得到false, false, true, true.In而不是这个控制台，我希望第二个控制台消息是真的。有人可以解释它是如何发生的，以及我如何在组件呈现之前实际更改状态？

Answer 1

setIsAuth不会导致局部变量isAuth改变其值。const's 无法更改它们的值，即使您将其定义为let，这也不是设置状态的作用。相反，当您设置状态时，组件会重新渲染。在那个新渲染上，调用useState将返回新值，您可以将新值用于新渲染。