【React】useState()で特定の配列の値のみを更新する

  • 2021年11月29日
  • React

今回は、React の useState() で配列データを扱っている際に、特定の要素のみを更新する方法です。
動くには動くけど、もっとスタイリッシュに書きたい!と思って調べたところ、下記の記事がヒットしました。

useStateで配列の特定の要素を更新する方法
https://zenn.dev/web_tips/articles/c026df542bc18b

 

サンプルコードは下記のとおりです。

import { useState } from "react";

const fruitsList = [
  "orange",
  "apple",
  "grape",
  "banana",
  "cherry",
];

const [fruits, setFruits] = useState(fruitsList);

const update = (index, newData) => {
  setFruits(
    fruits.map((fruit, i) => (i === index ? newData : fruit))
  );
}

データを更新する際に、update() を呼び出すのですが、この関数内で map() を使って State の配列データを更新しています。
これを見るまでは、一旦変数で State の値を更新してから、それを setFruits() に渡して State の値を更新していたのですが、こちらの方が行数も少なくて分かりやすいです!
処理の内容は同じでも、やはり行数が少ないとコードがスッキリしていいですね。

 

以上、React の useState() で特定の配列の値のみを更新する方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG