javascript - 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它接收到的函数，以改变 Parent 的 prop 副本。这是 child 。

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 是只读的，因此我需要创建一个克隆来进行更改，然后再将其传回以改变应用程序的状态(此处未显示)/

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

然而，这两个组件使用相同的原则:我不是在改变 prop，而是在改变本地存储的 prop 克隆。为什么这对 Child 有效，但对 Parent 无效？

Answer 1

Object.assign 只对 prop Object.assign Reference 进行浅拷贝.为了对 prop 进行真正的深度复制(并消除错误)，您可以使用 newStuff: JSON.parse(JSON.stringify(stuff)) 进行深度复制。很高兴这有帮助!

这背后的真正原因在一个例子中给出:

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

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