キーワード†

• 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すると怒られましたね。

参考†

• React.jsの地味だけど重要なkeyについて - Qiita