【React】エラー、ワーニング対応

by

Reactを学習していく上で出てきたエラー、ワーニングなどへの対応方法を記載していきます。

※React入門はこちらからどうぞ

※こちらはUdemy
での学習メモです。

map()メソッドを使用中にLoop内でユニークなキーがない

以下のワーニングが出ました。

Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at App

map()関数内でpropsを関数コンポーネントに渡しているときに発生。

  const testArr = [
     {title: "name1", number: 1},
     {title: "name2", number: 3},
     {title: "name3"}
  ]

testArr.map((val) => {
           return <Component_test props1={val.title} props2={val.number}/>
})

const Component_test = (val) => {
        // propsを受け取ってHTMLをreturn
        return <div>{val.props1}, {val.props2}</div>
}

↑の「<Component_test props1={val.title} props2={val.number}/>」にユニークなキーが指定されてないのが原因っぽいです。以下のように修正したら解消しました。

 const testArr = [
     {title: "name1", number: 1},
     {title: "name2", number: 3},
     {title: "name3"}
  ]

testArr.map((val, index) => {
           return <Component_test props1={val.title} props2={val.number} key={index}/>
})

const Component_test = (val) => {
        // propsを受け取ってHTMLをreturn
        return <div>{val.props1}, {val.props2}</div>
}

mapの第２引数indexを追加して、Component_test呼び出し時に”key”というpropsを追加しました。（props3とかでは解消しませんでした）

Chrome拡張によるエラー

Unchecked runtime.lastError: The message port closed before a response was received.

コメントする