REACTJS 渲染方法在状态更新后不更新

Question

大家好，我有一个基本对象，如下所示：

现在我想向“选项”添加一个元素，这些元素应该呈现一个新的 JSX 元素，如下所示：

这是我的“添加”功能：

状态正在更新，但不会呈现新的 JSX。谁能帮帮我。

Answer 1

let tmpExtraObject = extraObject

这不会复制对象，因此您之后对其所做的任何更改都会改变原始对象。然后，当您使用同一个对象设置状态时，React 将在旧状态和新状态之间执行 ===，看到它们是同一个对象，因此跳过渲染。

相反，您需要创建状态的副本并更改副本：

let tmpExtraObject = {
   ...extraObject,
   options: [
      ...extraObject.options,
      {
        id: extraObject.options.length + 1,
        name: "",
        priceBase: "",
        isDefault: false,
      }
   ];
}
setExtraObject(tmpExtraObject)

Answer 2

删除value : ：

setExtraObject({
id:...,
options :...
})

在添加函数中复制您的状态，而不是定义指向它的新变量：

const tmpExtraObject = {...extraObject}

REACTJS 渲染方法在状态更新后不更新

REACTJS render method not updating after state update

jsx

ecmascript-6

reactjs