Javascript 反应到陈旧状态

我试图在回调中调用setState asynchronous，问题是当我的函数调用setState时，状态被另一个发生的事件更新了。有没有办法从嵌套回调查询当前状态

下面是一个简单的演示，展示了我遇到的问题：

import React，{Component，useState}来自'React'；
从'react dom'导入{render}；
函数App（）{
const[state，setState]=useState（{value:0}）；
const click=async（）=>{
setTimeout（（）=>setState（{value:state.value+10}），300）；
异步函数apiCall（状态）{
//暂时假装一下
返回新承诺（（res）=>{
设置超时（（）=>{
//！！！在这里获取最新状态！！！
res（{value:state.value+1}）；
}, 1000)
});
}
const newState=等待apiCall（状态）；
设置状态（newState）；
}
返回(
值：{state.Value}
使现代化
);
}
render（，document.getElementById（'root'））；

useState

有一个函数更新程序表单。您可以在更新之前使用它来获取最新的状态值

const[val，setVal]=React.useState（initVal）；
const obj={str:'Hello'}；
//合并状态表-
塞瓦尔（obj）；
//函数更新程序窗体-
seVal（prevState=>{
//Object.assign也可以
返回{…prevState，{str:prevState.str+'World'}；
});

所以你的例子会变成

setTimeout（（）=>setState（prevState=>（{value:prevState.value+10}）），300）；

参考文件-

我还更新了您的codesandbox，使其能够与评论一起使用。

---

useState

有一个函数更新程序表单。您可以在更新之前使用它来获取最新的状态值

const[val，setVal]=React.useState（initVal）；
const obj={str:'Hello'}；
//合并状态表-
塞瓦尔（obj）；
//函数更新程序窗体-
seVal（prevState=>{
//Object.assign也可以
返回{…prevState，{str:prevState.str+'World'}；
});

所以你的例子会变成

setTimeout（（）=>setState（prevState=>（{value:prevState.value+10}）），300）；

参考文件-

我还更新了您的codesandbox，使其能够与评论一起使用。

---

您能演示如何为它编写测试吗？函数更新程序窗体之后的onclick处理程序未更改state.const[eventId，setEventId]=useState（“”）；我们如何在这里更新？您能演示如何为它编写测试吗？函数更新程序窗体之后的onclick处理程序未更改state.const[eventId，setEventId]=useState（“”）；我们如何更新这里？