React Hooks useEffect 不会使用正确的状态

Question

<Button
onClick={() => {
console.log('addedNodes', addedNodes)
let credentials = //something...
let nodes = [...addedNodes]
console.log(addedNodes)
setCurrentForm(
{
...currentForm,
credentials: credentials,
nodes: [...addedNodes],
}
)
}}
</Button>

我有一个按钮，可以使用另一个状态addedNodes更新currentForm状态。 每当currentForm更新时，我都会使用useEffect控制台.logcurrentForm。

useEffect(() => {
console.log('currentForm ,,,,,, ', currentForm)
console.log('addedNodes ,,,,,, ', addedNodes)
}, [currentForm]);

这将打印出正确的更新状态。

但是，当我尝试使用该状态添加 API 请求时，它会返回到更新之前的状态。

例如，当我将useEffect更新为

useEffect(() => {
console.log('currentForm,,,,,, ', currentForm)
console.log('addedNodes ,,,,,, ', addedNodes)
console.log('RUNNING POST')
setLoadingStatus('loading')
let body = {
form: currentForm,
}
intializeForms()
let options = {
headers: header,
method: 'post',
mode: 'cors',
body: JSON.stringify(body),
}
console.log('options.body', options.body)
const urls = ['...'];
const fetchJson = url => fetch(url, options).then(res => res.json());
Promise.all(urls.map(fetchJson))
.then(([result]) => {
...
})
.catch(err => {
setLoadingStatus('none')
console.log(err)
});
}, [currentForm]);

console.log('options.body', options.body)打印出旧currentForm。

这很奇怪，因为console.log(currentForm)打印了预期的状态，但是当我实际将其用于 API 调用时，它会返回到原始形式。

我认为这是因为每次更新状态时都会调用此useEffect，但不确定。

有什么帮助吗？

Answer 1

有问题的代码片段

let body = {
form: currentForm,
}
intializeForms()
// later bad body.form content

form获得对currentFrom对象的引用，则currentFromintializeForms()中被覆盖...这样JSON.stringify(body)对不良数据进行操作。

为什么 Kaca992 的解决方案不起作用？

let body = {
form: {...currentForm},
}

它应该从currentForm' 元素/属性创建一个新对象。
可能它适用于currentForm的某些部分，例如nodes因为它们被正确分配/传递(以不可变的方式 - 通过新实例(：

nodes: [...addedNodes],

可能其他currentForm元素是始终相同的对象引用的副本，在更改时发生突变，而不是替换为新实例。

溶液：

在这种情况下，在currentForm"消耗"(字符串化(之后调用intializeForms()就足够了 -let options =块。

表单重置(intializeForms()调用(的其他好地方可以Promise.all(...解析功能(.then部分(。

Answer 2

初始化表单是做什么的？如果当前窗体是引用类型，也许您可以重置值？尝试像这样设置正文：

let body = {
form: {...currentForm},
}