将对象推入数组状态，在打印数组时，它会打印旧状态的值。状态对象包含来自表单字段的输入[重复]答案

【问题标题】：pushing a object into array state , on printing array it prints values with old state. the state objects contains inputs from form fields [duplicate]将对象推入数组状态，在打印数组时，它会打印旧状态的值。状态对象包含来自表单字段的输入[重复]
【发布时间】：2021-10-11 06:27:32
【问题描述】：

在理解反应状态时遇到问题。我通过单击按钮将对象推送到输入字段中的多个值到数组中。 onClick 按钮应显示最新状态，但显示表单中先前的输入值。我该如何解决这个问题。

let addToList = ()=>{

let data={};

data.component=returnCmpName(SelCom);

data.question=question;

switch(SelCom){

case 1 : case 2:

data.required=checked;

data.errorMessage=errorMessage;

break;

case 3 : case 4 : case 5: data.options=NewList.slice(); break;

case 6:

data.fileAllowed=fileAllowed;

data.fileLimit=fileLimit;

break;

case 7: break;

case 8: break;

default:break;

}

rendcompState(prevData=>[data,...prevData])

console.log(rendComp)

}

【问题讨论】：

React 状态更新是异步处理的，因此尝试在更新入队后立即记录它只会记录当前渲染周期中的状态值，而不是在后续渲染中更新的状态值循环。

标签： javascript reactjs state

【解决方案1】：

您发布的代码有点模糊，
但似乎您正试图在设置后立即记录状态。
在 React 中设置状态是一个异步操作，这意味着它在您继续执行代码块时在后台运行。

这实质上意味着当您尝试记录它时，状态仍未完成设置。

你可以做的是使用 React 的内置 useEffect 钩子，
它可以获取一组依赖项，并在其中任何一个依赖项的值发生变化时运行回调函数。

应该是这样的：

useEffect(() => {
   console.log(state);
}, [state]);

你只需在你的函数组件中添加这个钩子，
而console.log 只会在状态实际完成更新后运行。

【讨论】：