React prop的本地副本是只读的

时间:2017-01-11 03:48:23

标签: javascript reactjs

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

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的副本。然后它将自己更新的东西副本传递给它收到的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> ) } 函数,以便改变父级的道具副本。这是孩子。

stuff

注意,我已经使用Object.assign基本上克隆了setProp道具或其子属性,视情况需要而定。原因是:React prop是只读的,因此我需要创建一个克隆来进行更改,然后再将其更改为改变应用程序的状态(此处未显示)/

现在,这适用于子组件 - stuff会改变updateTeam的正确属性,通过登录到控制台来确认。但是,当方法到达Uncaught TypeError: Cannot assign to read only property 'side' of object '#<Object>'时,我收到一条错误消息:<xsl:variable name="rptYearVal" select= "//Reports/Report/year" />

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

2 个答案:

答案 0 :(得分:8)

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

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

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

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

答案 1 :(得分:-4)

尝试将const更改为let以获取本地副本