React 配列の並べ替え

React では、アイテムの配列を並べ替えてレンダリングする必要がある場合があります。 この投稿では、React でオブジェクトの配列を並べ替えてレンダリングする方法について説明します。

React 配列の並べ替え

Array.sort 関数は元の配列を変更するため、sort() を実行する前に、拡散構文 (...) を使用してその浅い複製を作成しました。

Array.map 関数を使用して、並べ替えられた配列を描画します。

import React from 'react';

export default function App() {
  const students = [
    {id: 9, name: 'Shiv', country: 'Nepal'},
    {id: 7, name: 'Kumar', country: 'Japan'},
    {id: 5, name: 'Yadav', country: 'USA'},
  ];

  return (
    <div>
      {[...students]
        .sort((a, b) => a.id - b.id)
        .map((student) => {
      return (
          <div key = {student.id}><h2>ID: {student.id} <
          /h2>
              <h2>Name: {student.name}</h2 >
          <h2>Country: {student.country} < /h2>

              <hr / >
          </div>
          );
        })}
    </div>);
}

ここで、おそらく .sort() 関数の詳細について説明します。 .sort() への引数として、コールバック関数が送られます。

コールバックは、比較する 2つの配列エントリを示す 2つのパラメーターを受け入れます。

関数本体内の return ステートメントは、三項式で構成されます。 これは、2つの配列メンバー A と B の最初 (名) の属性を比較します。

要素 A の名が要素 B よりも大きい場合は 1 を返します (たとえば、A がアルファベットの後ろに来る場合)。 それ以外の場合は -1 を返します。

値 1 が返された場合、要素 A が最初にソートされます。 値 -1 が返された場合、要素 B が最初にソートされます。

実際、sort ボタンを押すと、エントリが名前の順に A から Z まで並べ替えられます。

ソート後、map() 関数への呼び出しを連鎖させました。 ソートされた配列をレンダリングする必要がある場合は、中間変数に保持することをスキップできます。