ReactJs - 类型错误：无法分配给 object 的只读属性“名称”'#<object> '<div id="text_translate"><p> 我有一个对象数组：</p><pre> var subcategories = [{name:'gloves', tag:'wool'}, {name:'boots', tag: 'leather'}]</pre><p> 我只想找到 object 的索引来更改名称或标签。 我用这个 function：</p><pre> 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) }</pre><p> 错误发生在var newObj = Object.assign(val, obj)</p><p> 我认为这个错误意味着我不能直接改变 state，所以我必须复制一份。 我认为通过subcategories映射并将其推送到本地newArr意味着我制作了数组的副本。 但是当我想在其中更改 object 的值时它不起作用，所以我使用了 Object.assign，我认为它会从数组中深度复制特定的 object，但它也不起作用。</p><p> 我在这里错过了什么？</p></div></object>

Question

I have an array of objects:

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

All I want to do is to find the index of the object to change a name or a tag. I use this function:

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)
}
           

The error happens at var newObj = Object.assign(val, obj)

I thought the error means I can't mutate the state directly and so I have to make a copy. I thought that mapping through subcategories and push it into a local newArr means I made a copy of the array. But it wasn't working when I wanted to change a value of object in it so I used Object.assign which I thought would deep copy the particular object from the array, but it's not working either.

What am I missing here?

Answer 1

As pointed in comments:

• the code you posted does not show how you created object with unmodifiable property
• you can create a new object and not use Object.assign to get rid of the error
• use map function in more idiomatic way

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