React の状態が正しい順序でマッピングされない
Redux を使用した Next.js プロジェクトがあります。私のストアには、Redux リデューサーを介して更新される一連の状態があります。基本的には、いくつかのコンポーネントでよく使用する状態配列です。
レデューサーの 1 つで、この配列をソートします。配列にはオブジェクトが入っており、それらを特定のプロパティで並べ替えます。 console.log 配列を実行すると、正常にソートされているようです。
コンポーネントの 1 つで、この並べ替え状態をマップしました。ここではロジックを単純化しました。
リーリーHTML が表示されると、すべての要素が正しい順序ではありません。最後の数十の div 要素は順序付けされているように見えますが、最初の数十はランダムに見えます。
たとえば、これは配列です。
リーリー並べ替え後、コンソール ログは期待どおりの結果を返します。これがソート機能です。
names = names.sort((a, b) => a.firstname.localeCompare(b.firstname))
生成される HTML は次のようになります。
その代わり、何らかの理由で結果がめちゃくちゃになります。これは Redux の編集状態が原因であると思われますが、理由はわかりません。
私の知る限り、これは広範囲にわたるバグであり、コードが単純化しすぎている場合は、喜んで追加のコンテキストを提供します。どのような回答でも大歓迎ですが、問題の所在を絞り込むのに役立つ回答は特に役立ちます。
