0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

【React初心者】Warning 「 Each child in an array or iterator should have a unique "key" の対処方法

はじめに

yosukeです!
先日、私が所属するevoluの自社サービスとしてリリースした「 小説執筆アプリ - Mono - 」のUIを急遽Reactで作り直しちゃおうとなり、0からReactを学びながら実装に励んでおります!

状況

小説のタイトルのeditページ更新処理を行う関数コンポーネント内でmapを使いform内で更新対象のカラムをループ描画させた

結果

問題なく動作はするがデベロッパーツールのコンソールに表題のエラーが表示される

結論

「配列に、一意の「キー」が必要です」とのことなので、ループ処理領域のFormタグにkeyを渡して解消

edit.tsx コンポーネント単体でキー指定
  return (  
            //省略

  {users.map((user) =>
          <Form key={(user.id)}>

            //省略

     )}

こんな感じでkey属性に一意の値を渡してあげれば解消します。

edit.tsx 親コンポーネント側に子コンポーネントを呼んでキー指定する場合
return (
    <>
      {users.map((user) =>
        plot.plot_contents.map((plot_content) =>
          <PlotEditForm
            name={user.name}
            key={user.id}///これ!
          />
        ))}

コンポーネントをpropsでやりとりしている場合は親コンポーネント側でkeyを指定してあげます。

詳しくはこちら
https://facebook.github.io/react/docs/lists-and-keys.html
これを読むと、listで書かれてますがFormも同じで、返されるDOMはidを持つことで不要なレンダリングを避けたりできるとのこと。
「ユニークなidをkeyに渡すことでパフォーマンス低下対策をしている」という感じですかね。

参考doc:https://facebook.github.io/react/docs/lists-and-keys.html

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?