Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【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

Yosuke_Narumi
駆け出しエンジニアです! 現在はRailsで自社サービスのアプリの開発をしています! 先月末(2020/11)、入社1月で「小説執筆アプリ-Mono-」をリリースさせていただきました! https://www.mono-kaki.site/
evolu
「みんながわくわくする世界をつくる」ために日々技術の研鑽をしていきます
https://evolu.tokyo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away