【问题标题】:ReactJs - TypeError: Cannot assign to read only property 'name' of object '#<Object>'ReactJs - TypeError:无法分配给对象'#<Object>'的只读属性'name'
【发布时间】:2021-01-08 13:31:45
【问题描述】:

我有一个对象数组:

var subcategories = [{name:'gloves', tag:'wool'}, {name:'boots', tag: 'leather'}]

我要做的就是找到对象的索引来更改名称或标签。我使用这个功能:

function setSubcat(val, index, lang){
   var newArr = []
   var obj = {
      'name': val
   }
   subcategories.map((val, i)=>{
      if(index === i){
         var newObj = Object.assign(val, obj)
         newArr.push(newObj)
      }
      newArr.push(val)
   })
   setSubcategories(newArr)
}
           

错误发生在var newObj = Object.assign(val, obj)

我认为这个错误意味着我不能直接改变状态,所以我必须制作一个副本。我认为通过subcategories 映射并将其推送到本地newArr 意味着我制作了数组的副本。但是当我想更改其中的对象值时它不起作用,所以我使用了 Object.assign ,我认为它会从数组中深度复制特定对象,但它也不起作用。

我在这里错过了什么?

【问题讨论】:

  • 同意;您可以发布更多代码或游乐场示例吗?这段代码没问题。
  • 请不要那样使用map。每个人都会阅读该代码并认为“这是一个错误吗?我需要问他......”。 map 用于转换每个元素,forEach 用于访问每个元素。
  • 仍在使用 map 正确使用:typescriptlang.org/play?#code/…
  • @Lesiak 就是这样。非常感谢

标签: reactjs typescript react-state-management


【解决方案1】:

正如在 cmets 中指出的那样:

  • 您发布的代码未显示您如何创建具有不可修改属性的对象
  • 您可以创建一个新对象而不使用 Object.assign 来消除错误
  • 以更惯用的方式使用 map 函数
interface TaggedItem {
    name: string,
    tag: string
}
var subcategories = [{name:'gloves', tag:'wool'}, {name:'boots', tag: 'leather'}];

function setSubcat(val: string, index: number, _lang: any){
   var obj: Partial<TaggedItem> = {
      'name': val
   }
   var newArr: TaggedItem[] = subcategories.map((val, i)=>{
      if(index === i){
        return {
            ...val,
            ...obj
        } 
      } else {
        return {...val};
        // or return val; if you don't need a full copy
      }
   })
   console.log(newArr);
}

setSubcat('newName', 0, undefined);

Playground link

【讨论】:

  • 是的,我使用地图的方式没有帮助。这真的很整洁,再次感谢。
猜你喜欢
  • 1970-01-01
  • 2019-02-08
  • 2019-11-28
  • 2023-03-13
  • 2021-09-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多