无法分配给 object '# 的只读属性'property'<object> '<div id="text_translate"><p> 我有这个问题。</p><p> 带接口：</p><pre> export interface IDevice { id: string, selected: boolean }</pre><p> 通过以下方式创建实例：</p><pre> let newDevice: IDevice = { id: uuid4(), selected: false, } as IDevice;</pre><p> 它被添加到 recoil state 中的数组中，并在 React 中用于 function 中，其中数组已使用 useRecoilState() 检索。 const [leftList, setLeftList] = React.useState&lt;IDevice[]&gt;([]);</p><p> 现在它在处理程序中用于选择列表控件上的设备，这里发生错误：</p><pre> ... leftList.map((item: IDevice) =&gt; { if (item.id === event.dataItem.id) { item.selected =.item;selected; } return item. })...</pre><p> 我收到错误消息：无法分配给 object '#' 的只读属性 'selected'</p><p> 即使首先通过 [...leftList] 克隆数组也无济于事。</p><p> 我迷路了:-)希望有人能对此有所了解吗？</p></div></object>

Question

I have this problem.

With interface:

export interface IDevice {
  id: string,
  selected: boolean
}

creating instance by:

let newDevice: IDevice = {
  id: uuid4(),
  selected: false,
} as IDevice;

It gets added to array in recoil state, and in React used in a function where array has been retrieved with useRecoilState(). const [leftList, setLeftList] = React.useState<IDevice[]>([]);

Now it is being used in a handler for selecting the devices on a list control, here the error occurs:

...
leftList.map((item: IDevice) => {     
      if (item.id === event.dataItem.id) {
        item.selected = !item.selected;
      }
      return item;
    })
...

And I get the error: Cannot assign to read only property 'selected' of object '#'

Even cloning the array first by [...leftList] does not help.

I'm lost:-) Hope someone can spread light on this?

Answer 1

State shouldn't be modified directly, which is what you're currently doing now in your .map() method by updating the objects. TS is trying to tell you not to do this by making your objects read-only.

Instead, you can create a new object with all the properties from item (done using the spread syntax... ), along with a new overwritting property selected , which will use the negated version of the item's currently selected item if the id matches the event's data item id, or it'll keep the original selected value:

leftList.map((item: IDevice) => ({
  ...item, 
  selected: item.id === event.dataItem.id ? !item.selected : item.selected
}))

Cloning the array using the spread syntax ( [...leftList] ) will only do a shallow copy, and won't do a deep-copy of the objects within it, as a result, modifying the object references within .map() is still modifying the original state.

Or, instead of spreading the item object and creating a new object each time (which can hinder performance a little as pointed out by @3limin4t0r ), you can instead only return a newly created object when you want to modify the selected property:

leftList.map((item: IDevice) => {     
  if (item.id !== event.dataItem.id) return item;
  return {...item, selected: !item.selected};
});