在"useEffect"函数中工作"useState"函数

Question

我正在尝试在useEffect中使用useState。我想访问和修改其中的状态(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。我期望第二个控制台消息为真，而不是此控制台。有人可以解释它是如何发生的以及我如何在组件渲染之前实际更改状态吗？

Answer 1

>setIsAuth不会导致局部变量isAuth更改其值。const数据值无法更改，即使您将其定义为let，也不是设置状态的作用。相反，当您设置状态时，组件会重新呈现。在该新渲染上，对useState的调用将返回新值，您可以将该新值用于新渲染。

组件首次呈现。然后它运行效果。效果的闭包具有来自第一次呈现的局部变量，并且您的代码使用这些变量记录 false 两次。由于您调用了 set state，因此将发生新的渲染，并且该新渲染将具有不同的变量。当它的效果运行时，它将记录两次 true，因为这是其闭包中的值。

Answer 2

以下是代码中的一些注释，解释了 ReactsetState如何在组件重新渲染后仅更新本地 const

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;

Answer 3

这实际上是正确的。useEffect允许您在更新后访问最新状态。所以在第一次渲染中，你看到的基本上是初始状态，不管你是否更新它。

在useEffect内调用setState将导致使用新状态(isAuth = true(重新渲染，这将导致再次调用useEffect。此时，新的记录状态为 true。