無法分配給 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

我有這個問題。

帶接口：

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

通過以下方式創建實例：

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

它被添加到 recoil state 中的數組中，並在 React 中用於 function 中，其中數組已使用 useRecoilState() 檢索。 const [leftList, setLeftList] = React.useState<IDevice[]>([]);

現在它在處理程序中用於選擇列表控件上的設備，這里發生錯誤：

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

我收到錯誤消息：無法分配給 object '#' 的只讀屬性 'selected'

即使首先通過 [...leftList] 克隆數組也無濟於事。

我迷路了:-)希望有人能對此有所了解嗎？

Answer 1

State 不應該直接修改，這是您現在通過更新對象在.map()方法中所做的。 TS 試圖通過將對象設置為只讀來告訴您不要這樣做。

相反，您可以創建一個新的 object ，其中包含item的所有屬性（使用擴展語法完成... ），以及一個新的覆蓋屬性selected ，如果 id 與事件的數據項 ID，否則將保留原始選定值：

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

使用擴展語法（ [...leftList] ）克隆數組只會進行淺拷貝，不會對其中的對象進行深拷貝，因此會修改.map()中的 object 引用還在修改原來的state。

或者，不是每次都傳播item object 並創建一個新的 object （這可能會稍微影響性能，正如@3limin4t0r所指出的那樣），您可以只返回一個新創建的 ZA8CFDE6331BD59EB2AC96F8911C4B 時修改selected的屬性：

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