Keadaan tindak balas tidak dipetakan dalam susunan yang betul

Question

Saya mempunyai projek Next.js menggunakan Redux. Di kedai saya, saya mempunyai satu set keadaan yang dikemas kini melalui pengurang Redux. Pada asasnya tatasusunan keadaan yang saya kerap gunakan dalam beberapa komponen.

Dalam salah satu pengurang saya, saya menyusun tatasusunan ini. Tatasusunan diisi dengan objek dan saya menyusunnya mengikut sifat tertentu. Apabila saya console.log tatasusunan itu nampaknya disusun dengan baik.

Dalam salah satu komponen saya, saya memetakan keadaan pengisihan ini. Saya telah memudahkan logik di sini.

names.map((p) => (
    <div key={p.name}>
      {p.firstname} {p.lastname}
    </div>
  ));

Apabila HTML dipaparkan, semua elemen tidak berada dalam susunan yang betul. Beberapa dozen terakhir div elemen kelihatan dipesan, tetapi dozen pertama kelihatan rawak.

Sebagai contoh, ini ialah tatasusunan.

let names = [
    {
      "firstname": "Michael",
      "lastname": "Scott",
    },
    {
      "firstname": "Jim",
      "lastname": "Halpert",
    },
    {
      "firstname": "Dwight",
      "lastname": "Schrute",
    },
    {
      "firstname": "Pam",
      "lastname": "Beesly",
    },
    {
      "firstname": "Ryan",
      "lastname": "Howard",
    }
  ]

Selepas mengisih, pengelogan konsol akan mengembalikan hasil yang diharapkan. Ini ialah fungsi pengisihan.

names = names.sort((a, b) => a.firstname.localeCompare(b.firstname))

HTML yang dijana sepatutnya kelihatan seperti di bawah.

Sebaliknya, hasilnya kacau bilau atas sebab tertentu. Saya mengesyaki ini disebabkan oleh keadaan edit Redux, tetapi saya tidak tahu mengapa.

Setahu saya ini adalah pepijat yang meluas dan saya berbesar hati untuk menyediakan sebarang konteks tambahan jika kod saya terlalu dipermudahkan. Mana-mana jawapan akan sangat dihargai, tetapi sebarang jawapan yang membantu mempersempit di mana masalahnya akan sangat membantu.

Answer 1

Saya menggunakan pengurang Redux untuk mengisih tatasusunan. Walaupun log konsol adalah betul, elemen dipaparkan dalam susunan yang salah. Walaupun saya masih tidak tahu mengapa ini berlaku, penyelesaiannya adalah untuk tidak mengisih kandungan dalam pengurang.

Dalam Redux anda harus mengisih perkara melalui pemilih dan bukannya secara langsung Dengan mengisih perkara dalam pemilih saya dan bukannya terus dalam pengurang saya, masalah diselesaikan dengan sendirinya.