障害メモ/繰り返しでユニークなkeyがないと怒られる

キーワード

  • React
  • 繰り返し
  • unique key

現象

次のような繰り返しで、

const HistoryList = ({state}) => (
    <div>
        <ul>
            {
                state.resultHistory.map(result => (
                    <li>{result.value}</li>
                ))
            }
        </ul>
    </div>
)

次のwarningが出力される。

Warning: Each child in an array or iterator should have a unique "key" prop.

原因

VirtualDOMのdiffから実際のDOMに反映させるのに最小限の変更にするためのkeyが要る、ということのようです。

対策

ユニークなkeyをつけてあげる。

const HistoryList = ({state}) => (
    <div>
        <ul>
            {
                state.resultHistory.map(result => (
                    <li key={result.id}>{result.value}</li>
                ))
            }
        </ul>
    </div>
)

備考

AngularJSでもユニークでない要素を含む配列をngRepeatすると怒られましたね。

参考

作成日 2017-12-07