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

我试图在

useffect

内部使用

useState

。我想访问并修改其中的一个状态（

useffect

），此处命名为

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;

import React，{useState，useffect}来自“React”；
常量身份验证=（）=>{
const[isAuth，setIsAuth]=useState（false）；
useffect（（）=>{
console.log（isAuth）；
setIsAuth（真）；
console.log（isAuth）；
}，[isAuth]）；
返回{isAuth？True
：False
}；
};
导出默认身份验证；

---

在控制台中，我得到了

false

，

false

，

true

，

true

。我希望第二个控制台消息不是真的，而是真的。有人能解释一下它是如何发生的，以及在组件呈现之前我实际上如何更改状态的吗？

setIsAuth

不会导致局部变量

isAuth

更改其值

const

无法更改其值，即使您将其定义为

let

，设置状态也不会这样做。相反，当您设置状态时，组件将重新渲染。在新渲染上，调用

useState

将返回新值，您可以将该新值用于新渲染。

下面是代码中的一些注释，解释了组件重新渲染后，React

setState

将如何仅更新本地常量

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

const Authentication = () => {
    // React will initialise `isAuth` as false
    const [isAuth, setIsAuth] = useState(false);

    useEffect(() => {
        // Console log outputs the initial value, `false`
        console.log(isAuth);
        // React sets state to true, but the new state is not available until
        // `useState` is called on the next render
        setIsAuth(true);

        // `isAuth` will remain false until the component re-renders
        // So console.log will output `false` again the first time this is called
        console.log(isAuth);
    }, [isAuth]);

    // The first time this is rendered it will output <p>False</p>

    // There will be a re-render after the `setState` call and it will
    // output <p>True</p> 
    return <div>{isAuth ? <p>True</p> : <p>False</p>}</div>;
};

export default Authentication;

import React，{useState，useffect}来自“React”；
常量身份验证=（）=>{
//React会将'isAuth'初始化为false
const[isAuth，setIsAuth]=useState（false）；
useffect（（）=>{
//控制台日志输出初始值“false”`
console.log（isAuth）；
//React将状态设置为true，但新状态直到
//在下一次渲染时调用'useState'
setIsAuth（真）；
//在组件重新呈现之前，`isAuth`将保持为false
//因此，第一次调用console.log时，它将再次输出'false'
console.log（isAuth）；
}，[isAuth]）；
//第一次渲染时，它将输出False

//在'setState'调用之后将重新渲染，它将
//输出True

返回{isAuth？True
：False
}；
};
导出默认身份验证；

这实际上是正确的

useffect

用于访问更新后的最新状态。因此，在第一次渲染期间，您看到的基本上是初始状态，无论您是否更新它

---

在

useffect

内部调用

setState

将导致使用新状态重新加载程序（

isAuth=true

），这将导致再次调用useffect。此时，新记录的状态是正确的。

您可以通过给出一个示例详细说明您的解释吗？“效果总是“看到”它们在渲染中定义的道具和状态。因此，每个渲染都有自己的道具和状态。我建议阅读本文了解更多信息：好的，我想说的是组件第一次渲染时没有执行

setState

函数。对吗？组件第一次渲染。然后它运行效果。效果的闭包具有来自第一次渲染的局部变量，您的代码使用这些变量记录两次false。由于调用了“设置状态”，因此将发生新的渲染，并且新的渲染器将具有不同的变量。当它的效果运行时，它将记录两次true，因为这是它的闭包中的值。谢谢：）对于您的解释，我已经理解了您试图表达的观点，但是您能否告诉我，在第一次渲染之前，是否有任何方法可以更改默认状态。