Reactで色々いじっていると
The node to be removed is not a child of this node.
というエラーが出た。
配列等のプロパティ等に変動があったのでReact側で要素を削除しようとしたが、なんかおかしくない? と言われている。
渡された配列をmap
でループしているときとかに出る。
例えば
<MyItem items={items.filter(item => item.categoryId == categoryId)} />
という感じで配列を渡して、
{items.map((item, index) => {
return (
<option key={index} value={item.id}>
{item.name}
</option>
)
})}
みたいな時。
categoryId
が変わると配列のフィルタリングも変わるが、データが違うのに同じkeyのものが存在するのでReact側での要素の操作に問題が生じる。
keyはループ内ではなく、データ全体でユニークなものにすればいい。
return (
<option key={item.id} value={item.id}>
{item.name}
</option>
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント