[英]TypeError: Cannot assign to read only property '0' of object '[object Array]' in typescript
I am working on angular 8.我正在研究 angular 8。
taskList
which the component gets as an @Input()
.taskList
的数据,该组件作为@Input()
获取。tasklist
array.tasklist
来删除该行,然后再调用一次来获取任务列表数组。 This is the effect that for the same @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));
}),
),
);
My problem is that the sorting function works fine when I do on first page load.我的问题是当我在第一页加载时排序 function 工作正常。 But if I delete a row and then fetch the tasklist post-delete, I get the following 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]'
The as per the error message the following function in my code gives the error根据错误消息,我的代码中的以下 function 给出了错误
exchange(a, b) {
const temp = this.taskList[a];
this.taskList[a] = this.taskList[b]; //this line gives error
this.taskList[b] = temp;
}
This function is the part of a sorting code that uses the tasklist
array and sorts it.这个 function 是使用
tasklist
数组并对其进行排序的排序代码的一部分。
The flow being 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(detects change is taskList array) calls --> this.taskChange('export_name', 'asc') based on some condition calls --> this. exchange(a, b)
Following is my ngOnchanges method以下是我的 ngOnchanges 方法
ngOnChanges(changes: SimpleChanges) {
if (this.taskList !== null && this.taskList !== undefined) {
this.taskChange('export_name', 'asc');
}
}
Following is the main sorting method下面是主要的排序方法
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;
}
}
}
}
I am not sure what exactly is causing this error when the array changes the second time.当数组第二次更改时,我不确定到底是什么导致了这个错误。 I have tried a bunch of things but none of them worked.
我尝试了很多东西,但都没有用。 From what I found online this might be happening because I'm trying to mutate an array received as @Input.
从我在网上发现的情况来看,这可能会发生,因为我正在尝试改变作为@Input 接收的数组。 But the above code, which mutates the 'tasklist` array works on initial page load.
但是上面的代码,它改变了'tasklist'数组,适用于初始页面加载。 And only stops working when the array changes.
并且仅在数组更改时停止工作。 Could someone help me out?
有人可以帮帮我吗?
Try creating a copy of the Array before trying to sort it.在尝试排序之前尝试创建数组的副本。 Like using a spread operator.
就像使用扩展运算符一样。
arrayForSort = [...this.taskList]
Then after sorting you could assign it back to the taskList field然后排序后,您可以将其分配回 taskList 字段
For those coming to this issue with this error message using React/Redux, it might be that you're trying to mutate state directly which isn't allowed .对于那些使用 React/Redux 遇到此错误消息的人来说,可能是您试图直接改变状态,这是不允许的。
In my case I had this setup for getting state within a thunk (simplified):在我的情况下,我有这样的设置,用于在 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);
This was fixed for me by:这是通过以下方式为我修复的:
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);
I ran into this exact error while working on a nextjs
project.我在处理
nextjs
项目时遇到了这个确切的错误。 I put a findIndex
on an array of objects, trying to add a new key-value pair to a specific object of the array when i got this error.我在对象数组上放置了一个
findIndex
,当我收到此错误时,试图将新的键值对添加到数组的特定 object。 so i just did this:所以我只是这样做了:
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.