配列に対してのuseState使い方・更新

Question

前提

useState上にある配列内のオブジェクトの値を更新する方法をしりたいです。
単純なオブジェクトのみはこちらの記事をみつけ、やや実装までは至りましたが、別の方法がありましたら知りたいです。

実現したいこと

const ppl = [{ name: "hoge" }, { name: "fuga" }];

const [lst, setLst] = useState(ppl);

// setLstを使って、hogeさんをpiyoにしたい
// [{ name: "piyo" }, { name: "fuga" }];

自分の解決

一度該当の値を消してから再度追加する方法を思いつき、以下にて実装は出来ておりますが、indexが変わってしまう破壊的変更であるため困っています。

const name = "hoge"
setLst([...ppl.filter((p) => p.name !== name), {name:"piyo"}])

Answer 1

とりあえずこんな感じでしょうか。
(name 以外のプロパティがないなら ...obj, は不要ですが、そもそもオブジェクトにする必要がない気も…。)

setLst(lst.map(obj => obj.name === 'hoge' ? { ...obj, name: 'piyo' } : obj));

ただし、hoge さんが複数いると破綻するので、配列のインデックスを使ったり、各オブジェクトに id を持たせたりする必要があるかもしれません。

// 配列のインデックス idx と新しい名前 newName を使う場合
const newList = [...lst];
newLst[idx] = { ...lst[idx], name: newName };
setLst(newLst);

// id と name を使う場合
setLst(lst.map(obj => obj.id === id ? { ...obj, name } : obj));

Comments

[ruizu]

質問用にプロパティを削っておりました。
今回は重複無しでしたが、両種類とも綺麗に実装することが出来ました！
ありがとうございます！