React Hooks 配列の再レンダリング

ツイート
2021年08月26日
2021年08月26日

ドキュメント

ポイント

  • React Hooks を使用し、状態を監視します
    • 状態が変化することで、DOMを更新します
    • 配列を使用した場合、少し工夫が必要です

実装

[...arr]は同じ配列をコピーしています。Reactはそれが異なっていることを確認し、再レンダリングします。

jsx
setArr([...arr])

配列の要素を追加する場合

jsx
const [arr, setArr] = useState([{ id: 1 }]) let newArr = { id: 2 } setArr((arr) => [...arr, newArr])