J'ai un projet Next.js utilisant Redux. Dans ma boutique, j'ai un ensemble d'états mis à jour via un réducteur Redux. Fondamentalement, un tableau d'états que j'utilise fréquemment dans certains composants.

Dans un de mes réducteurs, je trie ce tableau. Le tableau est rempli d'objets et je les trie selon des propriétés spécifiques. Quand je console.log le tableau, il semble bien trié.

Dans l'un de mes composants, j'ai cartographié cet état de tri. J'ai simplifié la logique ici.

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

Lorsque le HTML est affiché, tous les éléments ne sont pas dans le bon ordre. Les dernières douzaines d'éléments div semblent ordonnées, mais la première douzaine semble aléatoire.

Par exemple, il s'agit d'un tableau.

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

Après le tri, la journalisation de la console renverra les résultats attendus. C'est la fonction de tri.

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

Le HTML généré devrait ressembler à ci-dessous.

Au lieu de cela, les résultats sont foirés pour une raison quelconque. Je soupçonne que cela est dû à l'état d'édition de Redux, mais je ne sais pas pourquoi.

Pour autant que je sache, il s'agit d'un bug répandu et je serai heureux de fournir tout contexte supplémentaire si mon code est trop simplifié. Toute réponse serait grandement appréciée, mais toute réponse permettant de déterminer où se situe le problème serait particulièrement utile.