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()
}

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

当我console.log newObj时，一切正常。但是，当我在currentForm之后检查setCurrentForm时，字段（p，handles和access_info）为空。

我知道React中的状态可能会延迟更新，因此我可能不得不使用useEffect。但是，在我的用例中，它是收集不同的状态并将其放入currentForm状态的新字段中，看来useEffect不是解决它的最佳方法。有人可以帮忙吗？

Answer 1

您完全误解了useState的工作方式。当您调用useState setter函数时，状态值实际上并不会立即更新，而是会触发组件以更新后的值重新呈现。即使您在函数中途调用设置器，状态值在该函数调用的整个生命周期中仍将是原始值。

您可以稍微调整一下自己必须要做的事情

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]);

React Hooks：将新字段添加到对象状态不会立即反映出来

2 个答案: