Ich arbeite an Winkel 8.

1. Ich habe eine Seite, die eine Tabelle anzeigt. Die Tabelle zeigt Daten aus einem Objektarray an taskList die die Komponente als erhält @Input().
2. Ich habe eine Sortierfunktion für die Spalten dieser Tabelle.
3. Ich habe auch eine Löschoption für jede Zeile. Wenn ich auf die Option „Löschen“ klicke, wird ein API-Aufruf zum Löschen der Zeile und dann ein weiterer Aufruf zum Abrufen der Zeile ausgeführt tasklist Array. Dies ist der Effekt, der für dasselbe gilt

  @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));
        }),
    ),
  );

Mein Problem ist, dass die Sortierfunktion beim Laden der ersten Seite einwandfrei funktioniert. Aber wenn ich eine Zeile lösche und dann nach dem Löschen die Aufgabenliste abrufe, erhalte ich die folgende Fehlermeldung:

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]'

Gemäß der Fehlermeldung gibt die folgende Funktion in meinem Code den Fehler aus

  exchange(a, b) {
    const temp = this.taskList[a];
    this.taskList[a] = this.taskList[b]; //this line gives error
    this.taskList[b] = temp;
  }

Diese Funktion ist der Teil eines Sortiercodes, der die verwendet tasklist Array und sortiert es.

Das Fließwesen ngOnchanges(detects change is taskList array) calls --> this.taskChange('export_name', 'asc') based on some condition calls --> this. exchange(a, b)

Es folgt meine ngOnchanges-Methode

ngOnChanges(changes: SimpleChanges) {
    if (this.taskList !== null && this.taskList !== undefined) {
      this.taskChange('export_name', 'asc');
    }
  }

Nachfolgend finden Sie die Hauptsortiermethode

  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;
        }
      }
    }
  }

Ich bin mir nicht sicher, was genau diesen Fehler verursacht, wenn sich das Array zum zweiten Mal ändert. Ich habe eine Menge Dinge ausprobiert, aber keines davon hat funktioniert. Nach dem, was ich online gefunden habe, könnte dies passieren, weil ich versuche, ein als @Input empfangenes Array zu ändern. Aber der obige Code, der das Array „tasklist“ verändert, funktioniert beim ersten Laden der Seite. Und funktioniert erst dann nicht mehr, wenn sich das Array ändert. Könnte mir jemand helfen?

Versuchen Sie, eine Kopie des Arrays zu erstellen, bevor Sie versuchen, es zu sortieren. Als würde man einen Spread-Operator verwenden.

arrayForSort = [...this.taskList]

Nach dem Sortieren können Sie es dann wieder dem zuordnen taskList Feld

Für diejenigen, die bei Verwendung von React/Redux auf dieses Problem mit dieser Fehlermeldung stoßen, könnte es sein, dass Sie versuchen, den Status direkt zu ändern, was nicht zulässig ist.

In meinem Fall hatte ich dieses Setup, um den Status innerhalb eines Thunks abzurufen (vereinfacht):

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);

Dies wurde für mich behoben durch:

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);

Ich bin bei der Arbeit an einem genau auf diesen Fehler gestoßen nextjs Projekt. Ich habe ein findIndex Bei einem Array von Objekten habe ich versucht, einem bestimmten Objekt des Arrays ein neues Schlüssel-Wert-Paar hinzuzufügen, als ich diese Fehlermeldung erhielt. Also habe ich einfach Folgendes gemacht:

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

Richtig

const arrayOfObjects = [...someOtheObj.originalArrayKey]

falsch

const arrayOfObjects = someOtheObj.originalArrayKey