今回は、React の useState()
で配列データを扱っている際に、特定の要素のみを更新する方法です。
動くには動くけど、もっとスタイリッシュに書きたい!と思って調べたところ、下記の記事がヒットしました。
useStateで配列の特定の要素を更新する方法
https://zenn.dev/web_tips/articles/c026df542bc18b
サンプルコードは下記のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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() で特定の配列の値のみを更新する方法についてでした。
ご参考になれば幸いです。