React useState（）设置状态设置正确但不记录更新的值[重复]答案

【问题标题】：React useState() set state is setting properly but does not log the updated value [duplicate]React useState（）设置状态设置正确但不记录更新的值[重复]
【发布时间】：2021-09-09 07:36:27
【问题描述】：

我有一种方法可以拯救员工。在这里，我想用返回的保存对象设置员工状态。它正在更新状态值，但在 setEmployee() 之后不显示下一行日志。但它显示员工变动时 useEffect() 的更新值。那么为什么在下一行设置值后它没有显示，虽然我已经使用了等待。

我的代码如下：

初始状态，空对象>>

const [employee, setEmployee] = useState({});

对员工的使用效果>>

useEffect(() => {
    console.log(">>>> inEmpolyeeUseEffect: " + employee);
}, [employee]);

添加员工方法>>

const addEmployee = async (empObj) => {
    try {
        const response = await axios.post(`http://localhost:9000/employee/save`, { ...empObj });
        const data = response.data;
        await setEmployee(JSON.stringify(data));
        console.log("EmployeeDataAfterSave: " + employee);  // log empty object here like {}
        
        ...
    } catch (error) {
        console.log(error +" :: " + JSON.stringify(error));
    }
}

【问题讨论】：

setState 是async 操作，设置后无法立即读取更新值。这就是为什么提供useEffect 的原因，它在后台值发生更改时执行。
见stackoverflow.com/a/61842546/2805121
关于 React 中的状态更新，您需要了解两件事： 1. 在组件的特定渲染中，状态是恒定的；组件无法看到更新的状态直到它重新呈现。 2. 状态更新是异步的。

标签： reactjs react-hooks setstate

【解决方案1】：

除了在 useEffect 中查看状态的变化之外，另一个选项是使用 setState 方法中的箭头函数来更新值，请参阅this

使用箭头功能应该可以让您立即在控制台日志中看到状态的变化

【讨论】：