TypeError：无法分配给打字稿中对象“[object Array]”的只读属性“0”

Question

我正在研究 Angular 8。我有一个显示表格的页面。taskList该表显示来自组件获取的对象数组的数据@Input()。我对该表的列有排序功能。我在每一行上还有一个删除选项。当我单击删除选项时，它会调用 api 来删除该行，然后再次调用来获取数组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));        }),    ),  );我的问题是，当我加载第一页时，排序功能工作正常。但是，如果我删除一行然后获取删除后的任务列表，则会收到以下错误：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]'根据错误消息，我的代码中的以下函数给出了错误  exchange(a, b) {    const temp = this.taskList[a];    this.taskList[a] = this.taskList[b]; //this line gives error    this.taskList[b] = temp;  }该函数是使用数组并对其进行排序的排序代码的一部分tasklist。流量为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,    };我不确定当数组第二次更改时到底是什么导致了此错误。我尝试了很多方法，但没有一个有效。根据我在网上发现的情况，这可能会发生，因为我正在尝试改变作为 @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项目时遇到了这个确切的错误。当我收到此错误时，我将 a 放在findIndex一个对象数组上，尝试将新的键值对添加到数组的特定对象中。所以我只是这样做了：

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