javascript - TypeError: Tidak dapat menetapkan properti hanya-baca '0' dari objek '[object Array]' dalam typescript

Saya sedang bekerja dengan Angular 8.

  1. Saya memiliki halaman yang menampilkan sebuah tabel. Tabel tersebut menampilkan data dari array objek taskList yang diperoleh komponen sebagai @Input().
  2. Saya memiliki fungsi pengurutan pada kolom-kolom tabel ini.
  3. Saya juga memiliki opsi hapus pada setiap baris. Ketika saya mengklik opsi hapus, itu membuat panggilan API untuk menghapus baris tersebut dan kemudian panggilan lain untuk mengambil array tasklist. Ini adalah efek yang sama
  @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));
        }),
    ),
  );

Masalah saya adalah fungsi penyortiran berjalan dengan baik saat pertama kali halaman dimuat. Tetapi jika saya menghapus sebuah baris dan kemudian mengambil daftar tugas setelah penghapusan, saya mendapatkan kesalahan berikut:

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

Menurut pesan kesalahan, fungsi berikut dalam kode saya menghasilkan kesalahan

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

Fungsi ini adalah bagian dari kode pengurutan yang menggunakan array tasklist dan mengurutkannya.
Alurnya adalah ngOnchanges(mendeteksi perubahan pada array taskList) memanggil --> this.taskChange('export_name', 'asc') berdasarkan beberapa kondisi memanggil --> this.exchange(a, b)

Berikut adalah metode ngOnchanges saya

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

Berikut adalah metode pengurutan utama

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

Saya tidak yakin apa yang tepatnya menyebabkan kesalahan ini ketika array berubah untuk kedua kalinya. Saya sudah mencoba berbagai hal tetapi tidak ada satupun yang berhasil. Dari apa yang saya temukan secara online, ini mungkin terjadi karena saya mencoba memodifikasi array yang diterima sebagai @Input. Tetapi kode di atas, yang memodifikasi array 'tasklist', bekerja pada saat halaman dimuat pertama kali. Dan hanya berhenti bekerja ketika array berubah. Apakah ada yang bisa membantu saya?

Jawaban #1

Coba buat salinan dari array sebelum mencoba mengurutkannya. Seperti menggunakan operator spread.

arrayForSort = [...this.taskList]

Kemudian setelah mengurutkan, Anda bisa menetapkannya kembali ke bidang taskList

Jawaban #2

Bagi mereka yang menghadapi masalah ini dengan pesan kesalahan ini menggunakan React/Redux, mungkin Anda sedang mencoba memodifikasi state secara langsung yang tidak diizinkan.

Dalam kasus saya, saya memiliki pengaturan ini untuk mendapatkan state dalam sebuah thunk (disederhanakan):

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

Ini diperbaiki untuk saya oleh:

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

Artikel terkait