开发者问题收集

TypeError：无法分配给 TypeScript 中对象‘[object Array]’的只读属性‘0’

2020-11-22
179187
javascript angular typescript ngrx

我正在使用 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（检测到更改是 taskList 数组）根据某些条件调用 --> this.taskChange('export_name', 'asc') --> 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”数组。并且只有在数组更改时才停止工作。有人能帮帮我吗？

3个回答

尝试在对数组进行排序之前创建它的副本。例如使用扩展运算符。 

arrayForSort = [...this.taskList]

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

Jan Fiołka
2020-11-22

对于那些使用 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);
fredrivett
2021-03-20

我在处理 nextjs 项目时遇到了这个错误。我在对象数组上放置了一个 findIndex ，试图在数组的特定对象中添加一个新的键值对时出现此错误。所以我这样做了： 

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

正确 

const arrayOfObjects = [...someOtherObj.originalArrayKey]

错误 

const arrayOfObjects = someOtherObj.originalArrayKey
zahra shahrouzi
2023-01-25