原因

jsxにてmap関数でループさせたときによくみられるエラーです。

例えば以下のようにprops.listsをmap関数でループさせていると想定してみましょう。

import React from 'react

const Test = (props) => {
 return (
  <ul>
   { props.lists.map((list) => {
     <li>{ list }</li>
   ))}
  </ul>
 )
}

export default Test

この場合、コンソール上では「Warning: Each child in a list should have a unique “key” prop.」と出力されているはずです。

Reactではmap関数やforEach関数などでループ処理をさせる際に一意のkeyを与えていない場合にこのエラーが出力されます。

解決法

key={ ○○ }を直下の子要素に与える

この場合は、直下の子要素（例の場合は<li>要素）にkeyを指定してあげます。

※変更点は6~7行目

import React from 'react

const Test = (props) => {
 return (
  <ul>
   { Object.values(props.lists).map((list, index) => {
     <li key={ index.toString() }>{ list }</li>
   ))}
  </ul>
 )
}

export default Test

map関数やforEach関数では第2引数で配列内の要素におけるインデックス番号が取得できるので、それをtoString関数で文字列に変換してあげればOKです。

これでエラーは解決されるはずです。

関連記事:

TS2305: Module ‘”react-router-dom”‘ has no exported member ‘RouteComponentProps’.が表示された時の解決方法 Reactで「Uncaught TypeError: ○○.map is not a function」が出たときの解決法 WebページでJavaScriptが動かない場合の解決法 remove_filterでpタグを削除出来ない場合の解決法