Reactで、配列を元にリストを表示する処理を書いた。何も考えずpop()メソッドを使ったところ、うまく表示されない。
なぜだ。
ポップ君がメガンテするせいだった。
Reactでは状態の更新に縛りがある
Reactでは、状態はpropsとstateで管理する。前者はコンポーネントの外から渡されるもので、後者はコンポーネント内で定義・利用するものである。
これらは、専用のセッター関数を使って、元の値をコピーする形で更新しなければならない。
状態はコンポーネントの表示と関連している。Reactが状態の変更を検知できる仕組みがないと、一貫性を保てない。Reactでは、専用のセッター関数を使うことを前提に、状態を不変な（イミュータブルな）値として扱う。
配列.pop()メソッドは配列を変えてしまう
私が書いたコードは、getStaticProps()関数で受け取った二次元配列でループを回し、二次元目の配列の末尾の要素をpop()メソッドで取り出すというものだ。
pop()メソッドは、配列の末尾の値を削除し、その値を返す。つまり元の配列を変えてしまう。
結果としてReactコンポーネントが壊れてしまった。
配列.pop()の代わりに、配列.slice(-1)[0]としたら想定通りの表示が得られた。