为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

MMTTMM 2023-08-24 17:19:31
我正在研究 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”数组,但它会在初始页面加载时起作用。并且仅在数组更改时停止工作。有人可以帮我吗?
查看完整描述

3 回答

?
互换的青春

TA贡献1797条经验 获得超6个赞

在尝试对数组进行排序之前,请尝试创建该数组的副本。就像使用展开运算符一样。

arrayForSort = [...this.taskList]

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


查看完整回答
反对 回复 2023-08-24
?
缥缈止盈

TA贡献2041条经验 获得超4个赞

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


查看完整回答
反对 回复 2023-08-24
?
喵喵时光机

TA贡献1846条经验 获得超7个赞

我在做一个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


查看完整回答
反对 回复 2023-08-24
  • 3 回答
  • 0 关注
  • 120 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信