当前位置:  开发笔记 > 编程语言 > 正文

React prop的本地副本是只读的

如何解决《Reactprop的本地副本是只读的》经验,为你挑选了1个好方法。

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

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

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

  return 
}

子组件具有类似的结构-它使副本stuff,和其变异副本stuffonChange.然后它将自己更新的东西副本传递给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 (
    
) }

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

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

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



1> B Rob..:

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

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

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

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

推荐阅读
wangtao
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有