ReactComponentにおけるkeyは結構大事

ReactComponentでhtmlをレンダリングしていて，コンソールにwarningが出ていることがある． 無視しても大丈夫なものもあるのかもしれないが，エラーが出ることもあるので，気になって調べてみた．

こんな感じのエラー．

Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`. See https://fb.me/react-warning-keys for more information.

mapしているところで発生している

いろいろと自分のコードを消したりしてみると，どうやらrender内でmapしている部分で発生している．具体的にはこんなコード．

{list.map(function(list, i) {
  return (
    <div className="list">
      <div ...></div>
    </div>
  )
}, this)}

この部分をごっそり消すと，見事warningは両方共でなくなる．

mapに問題があるのか？ とか，forEachで表示したほうがいいのか？ とか，やってみたものの特に変化はない．

keyを指定したらwarningが消えた

unique "key"と書いてあるのが気になって，keyについて調べてみた． そこで，試しにkeyを入れてみたら，見事にwarningが消えた．

{list.map(function(list, i) {
  return (
    <div key={i} className="list">
      <div ...></div>
    </div>
  )
}, this)}

keyの役割

具体的なkeyの役割についてはこちらの記事が詳しい．

qiita.com

つまりは，mapするようなレンダリングをやると，繰り返し内で描画されるオブジェクトの区別がつかなくなり，差分レンダリングができなくなってしまう． そのために，繰り返しで同じオブジェクトをいっぱい生成するにしても，React側で区別がつくkeyを設定して欲しいと．

意外にもかなり重要な役割を担っていたくせに，今まで全然知らなかった．

key大事．

でもなぜ，setStateのwarningが消えたのかは謎

keyを設定しろって言ってるwarningが消えるのは理解できるが，setStateがrender内にあると言っていたwarningが，この修正だけでなぜ消えるのかは，不明です． 誰か知ってたら教えてください．