2019-01-21に更新

ReactでThe node to be removed is not a child of this nodeエラー

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開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント