React Hooks:向对象状态添加新字段不会立即反映出来

Question

我正在使用 React Hooks 来管理组件中的状态。

const addNode = () => {
let pform = pForm
let handles = [vForm, yForm, hForm]
let access_info = [virtualForm, management1Form, management2Form, consoleForm]
let newObj = {
...currentForm,
p: pform,
handles: handles,
access_info: access_info,
}
console.log('newObj', newObj)
setCurrentForm(
newRouterObj
)
console.log(currentForm)
let currArr = [...addedNodes]
currArr.push(currentForm)
setAddedNodes(currArr)
intializeForms()
}

上面的功能是我按下Add按钮时使用的onClick。形式(pForm, vForm, yForm, etc.(都是独立的状态。我将它们收集在一起并将它们放入单个对象中newObj并使用setCurrentForm将currentForm状态更新为newObj。

当我console.lognewObj时，一切都很好。但是，当我检查setCurrentForm后的currentForm时，字段(p、handles和access_info(是空的。

我知道 React 中的状态可能会有更新延迟，所以我可能不得不使用useEffect.但是，在我的用例中，收集不同的状态并将它们作为currentForm状态中的新字段放入似乎useEffect这不是解决它的最佳方法。谁能帮忙？

Answer 1

你误解了useState的工作原理。调用useStatesetter 函数时，状态值实际上不会立即更新，而是会触发组件使用更新的值重新呈现。即使您在函数中途调用资源库，状态值也将在该函数调用的整个生存期内保持原始值。

你可以稍微调整一下你必须成为什么

const addNode = () => {
...
let currArr = [...addedNodes]
// you know that currentForm is supposed to be newObj, so just push that
// see my explanation above to understand why it currentForm isn't what you expect
currArr.push(newObj)
...
}

Answer 2

这是一个异步操作，因此不会立即分配/更新值。您需要使用钩子监视更改useEffect以记录新值并执行任何操作以防万一

useEffect(() => {
// Whenever `currentForm` will be updated, this callback will be invoked

console.log('updated currentForm values', currentForm);
},[currentForm]);