Les états de réaction ne sont pas mappés dans le bon ordre

Question

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.

Answer 1

J'utilise le réducteur Redux pour trier un tableau. Bien que le journal de la console soit correct, les éléments sont affichés dans le mauvais ordre. Même si je ne sais toujours pas pourquoi cela se produit, la solution est de ne pas trier le contenu dans le réducteur.

Dans Redux, vous devriez trier les choses via des sélecteurs plutôt que directement. En triant les choses dans mon sélecteur au lieu de directement dans mon réducteur, le problème s'est résolu de lui-même.