React prop的本地副本是只读的

Question

假设我有两个组件。 父对象作为属性传递，然后将其复制到本地数据存储中。 它具有更新此本地存储的功能，该存储将传递给子级。 这是我的父组件：

const Parent = ({stuff}) => {
  const store = {
    stuff: Object.assign({}, stuff);
  }

  const updateStuff = (thing, property) => store.stuff[thing].property = thing;

  return <Child stuff={stuff} updateStuff={updateStuff} />
}

子组件具有类似的结构-它使副本stuff ，和其变异的拷贝stuff上的<input>的onChange 。 然后它将自己更新的东西副本传递给它收到的updateStuff函数，以便改变父级的prop的副本。 这是孩子。

const Child = ({stuff, updateStuff}) => {
  const stuff = {
    thing1: Object.assign({}, stuff.thing1),
    thing2: Object.assign({}, stuff.thing2)
  }

  const setProp = event => {
    const update = event.target.value;

    stuff.thing1.prop = update;
    updateStuff(thing1, stuff.thing1.prop)
  }

  return (
    <div>
      <input id="thing1" onChange={setProp} />
      <input id="thing1" onChange={setProp} />
    </div>
  )
}

注意，我已经使用Object.assign基本上克隆了stuff prop或它的子属性，视情况需要。 原因是：React prop是只读的，因此我需要创建一个克隆来进行更改，然后再将其更改为变异应用程序的状态（此处未显示）/

现在，这适用于Child组件 - setProp改变了stuff的正确属性，通过登录到控制台来确认。 但是，当方法到达updateTeam ，我收到一条错误消息： Uncaught TypeError: Cannot assign to read only property 'side' of object '#<Object>'

然而，两个组件都使用相同的原则：我没有改变道具，而是我正在改变一个本地存储的道具克隆。 为什么这适用于Child，而不适用于Parent？

Answer 1

Object.assign仅执行prop.Assign Reference的浅表副本。 为了制作道具的真正深层副本（并摆脱错误），您可以使用newStuff: JSON.parse(JSON.stringify(stuff))进行深层复制newStuff: JSON.parse(JSON.stringify(stuff)) 。 很高兴这有帮助！

这背后的真正原因在于一个例子：

let original = {
    name: 'Test',
    nestedObj: {
        (...some properties)
    }
}

在上面的示例中，原始对象属性“name”是一个新副本，但嵌套对象仍然是对原始对象的引用。 这样，当您尝试编辑嵌套对象的一部分时，它会引用原始对象并大声说它是不可变的。

Answer 2

尝试更改const以let本地副本