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

Question

我正在研究 Angular 8。

1. 我有一个显示表格的页面。taskList该表显示来自组件获取的对象数组的数据@Input()。

2. 我对该表的列有排序功能。

3. 我在每一行上还有一个删除选项。当我单击删除选项时，它会调用 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&nbsp;=&nbsp;[...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 hereconst items = [...getItems(state)];// ↓ which means we're not manipulating state, but just our `items` array aloneitems.sort((a, b) => a.order - b.order);

Answer 3

我在做一个nextjs项目时遇到了这个确切的错误。当我收到此错误时，我将 a 放在findIndex一个对象数组上，尝试将新的键值对添加到数组的特定对象中。所以我只是这样做了：const arrayOfObjects = [...someOtheObj.originalArrayKey]const index = arrayOfObjects.findIndex((obj)=>{&nbsp; // I had some conditions here})arrayOfObjects[index] = newValue正确的const arrayOfObjects = [...someOtheObj.originalArrayKey]错误的const arrayOfObjects = someOtheObj.originalArrayKey