在 React 中更新状态对象字段的正确方法

Question

我正在尝试以正确的方式将数组添加到状态对象的字段，但我似乎无法弄明白。

我有两个独立的功能组件。

组件A构成对象的开头：

const beginning = {
    FormId: 0,
    Company: "",
    CreatedBy: "",
    CreatedWhen: "",
    LastModified: "",
    LastModifiedBy: "",
    Payload: []
}

组件 B 为 Payload 字段（对象数组）生成值。所以最终对象看起来像这样：

const finishedJSON = {
    FormId: 0,
    Company: "",
    CreatedBy: "",
    CreatedWhen: "",
    LastModified: "",
    LastModifiedBy: "",
    Payload: [
        {
            item: 1
        },
        {
            item: 2
        }
    ]
}

来自组件 A 的对象作为名为 metaData

的 prop 传递给组件 B

在组件 B 中，我试图将对象数组添加到对象的 Payload 字段。

到目前为止，我试过这个但没有用：

export default function ComponentB({metaData}) {

    ...

    const [finishedJSON, setFinishedJSON] = useState(metaData);

    ...

    setFinishedJSON({
      ...finishedJSON,
      Payload: PayloadDataFromComponentB
    })
})

    ...
}

我试过使用它并且有效：


export default function ComponentB({metaData}) {

    ...

    const [finishedJSON, setFinishedJSON] = useState(metaData);

    ...

    setFinishedJSON( data => {
        data.Payload = PayloadDataFromComponentB;
    })

    ...
}

但是，我读到 here 这在 React 中是不好的做法。

我也尝试了文章中的 useImmer 解决方案，不幸的是它没有用新的 Payload 数据更新对象

有没有更好的方法来更新Payload字段？我只想使用最佳实践。如果我不清楚，请告诉我。谢谢！

Answer 1

您可以创建一个具有所有属性的全新对象。它不会变异。它只是 returns 一个全新的对象。

setFinishedJSON((data) => {
  return {
    ...data,
    payload: [ ...PayloadDataFromComponentB ]
  }
});

在 React 中更新状态对象字段的正确方法

Correct way to update sate object field in React

javascript

object

reactjs

use-state