React の状態が正しい順序でマッピングされない

Question

Redux を使用した Next.js プロジェクトがあります。私のストアには、Redux リデューサーを介して更新される一連の状態があります。基本的には、いくつかのコンポーネントでよく使用する状態配列です。

レデューサーの 1 つで、この配列をソートします。配列にはオブジェクトが入っており、それらを特定のプロパティで並べ替えます。 console.log 配列を実行すると、正常にソートされているようです。

コンポーネントの 1 つで、この並べ替え状態をマップしました。ここではロジックを単純化しました。

リーリー

HTML が表示されると、すべての要素が正しい順序ではありません。最後の数十の div 要素は順序付けされているように見えますが、最初の数十はランダムに見えます。

たとえば、これは配列です。

リーリー

並べ替え後、コンソール ログは期待どおりの結果を返します。これがソート機能です。

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

生成される HTML は次のようになります。

その代わり、何らかの理由で結果がめちゃくちゃになります。これは Redux の編集状態が原因であると思われますが、理由はわかりません。

私の知る限り、これは広範囲にわたるバグであり、コードが単純化しすぎている場合は、喜んで追加のコンテキストを提供します。どのような回答でも大歓迎ですが、問題の所在を絞り込むのに役立つ回答は特に役立ちます。

Answer 1

Redux リデューサーを使用して配列を並べ替えています。コンソール ログは正しいですが、要素が間違った順序で表示されます。なぜこれが起こるのかはまだわかりませんが、解決策は、Reducer でコンテンツをソートしないことです。

Redux では、直接ではなくセレクターを介して物事を並べ替える必要があります。リデューサーで直接ではなくセレクターで物事を並べ替えることで、問題は自動的に解決されました。