TypeError：無法分配給 typescript 中的 object '[object Array]' 的只讀屬性 '0'

Question

我正在研究 angular 8。

1. 我有一個顯示表格的頁面。 該表顯示來自 object 數組taskList的數據，該組件作為@Input()獲取。
2. 我對該表的列進行了排序 function。
3. 我在每一行上也有一個刪除選項。 當我單擊刪除選項時，它會調用tasklist來刪除該行，然后再調用一次來獲取任務列表數組。 這是相同的效果

  @Effect()
  DeleteTask$: Observable<Action> = this.actions$.pipe(
    ofType(importActions.DELETE_TASK),
    switchMap(params =>
      this.globalService
        .deleteTask(params)
        .mergeMap(deleteSuccess => {
          return from([
            new importActions.DeleteTaskSuccess(deleteSuccess),
            new importActions.LoadTaskList(),
          ]);
        })
        .catch((error, caught) => {
          return Observable.of(new GlobalError(error));
        }),
    ),
  );

我的問題是當我在第一頁加載時排序 function 工作正常。 但是，如果我刪除一行，然后在刪除后獲取任務列表，則會出現以下錯誤：

ERROR Error: Uncaught (in promise): TypeError: Cannot assign to read only property '0' of object '[object Array]'
TypeError: Cannot assign to read only property '0' of object '[object Array]'

根據錯誤消息，我的代碼中的以下 function 給出了錯誤

  exchange(a, b) {
    const temp = this.taskList[a];
    this.taskList[a] = this.taskList[b]; //this line gives error
    this.taskList[b] = temp;
  }

這個 function 是使用tasklist數組並對其進行排序的排序代碼的一部分。
被ngOnchanges(detects change is taskList array) calls --> this.taskChange('export_name', 'asc') based on some condition calls --> this. exchange(a, b) ngOnchanges(detects change is taskList array) calls --> this.taskChange('export_name', 'asc') based on some condition calls --> this. exchange(a, b)

以下是我的 ngOnchanges 方法

ngOnChanges(changes: SimpleChanges) {
    if (this.taskList !== null && this.taskList !== undefined) {
      this.taskChange('export_name', 'asc');
    }
  }

下面是主要的排序方法

  async taskChange(value, taskOrder) {
    this.sortOrder = taskOrder;
    this.selectedValue = value;
    const expr = {
      asc: (a, b) => a > b,
      desc: (a, b) => a < b,
    };
    for (let i = 0; i < this.taskList.length; i++) {
      for (let j = i + 1; j < this.taskList.length; j++) {
        switch (value) {
          case 'export_name':
            if (
              expr[this.sortOrder](this.taskList[i].name, this.taskList[j].name)
            ) {
              this.exchange(i, j);
            }
            break;
          case 'file_type':
            let type1;
            let type2;
            type1 = this.exportType.transform(this.taskList[i].code, []);
            type2 = this.exportType.transform(this.taskList[j].code, []);
            if (expr[this.sortOrder](type1, type2)) {
              this.exchange(i, j);
            }
            break;
        }
      }
    }
  }

當數組第二次更改時，我不確定到底是什么導致了這個錯誤。 我嘗試了很多東西，但都沒有用。 從我在網上發現的情況來看，這可能會發生，因為我正在嘗試改變作為@Input 接收的數組。 但是上面的代碼，它改變了'tasklist'數組，適用於初始頁面加載。 並且僅在數組更改時停止工作。 有人可以幫幫我嗎？

Answer 1

在嘗試排序之前嘗試創建數組的副本。 就像使用擴展運算符一樣。

arrayForSort = [...this.taskList]

然后排序后，您可以將其分配回 taskList 字段

Answer 2

對於那些使用 React/Redux 遇到此錯誤消息的人來說，可能是您試圖直接改變狀態，這是不允許的。

在我的情況下，我有這樣的設置，用於在 thunk 中獲取狀態（簡化）：

import store from "./myStore";

const state = store.getState();
const getItems = state => state.user.items;
const items = getItems(state);
// ↓ this blew up as it was attempting to manipulate `state`
items.sort((a, b) => a.order - b.order);

這是通過以下方式為我修復的：

import store from "./myStore";

const state = store.getState();
const getItems = state => state.user.items;
// ↓ in my case items is an array, so I create a new array by spreading state here
const items = [...getItems(state)];
// ↓ which means we're not manipulating state, but just our `items` array alone
items.sort((a, b) => a.order - b.order);

Answer 3

我在處理nextjs項目時遇到了這個確切的錯誤。 我在對象數組上放置了一個findIndex ，當我收到此錯誤時，試圖將新的鍵值對添加到數組的特定 object。 所以我只是這樣做了：

const arrayOfObjects = [...someOtheObj.originalArrayKey]
const index = arrayOfObjects.findIndex((obj)=>{
  // I had some conditions here
})
arrayOfObjects[index] = newValue

正確的

const arrayOfObjects = [...someOtheObj.originalArrayKey]

錯誤的

const arrayOfObjects = someOtheObj.originalArrayKey