読者です 読者をやめる 読者になる 読者になる

ReactComponentにおけるkeyは結構大事

React js プログラミング

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が消えるのは理解できるが,setStaterender内にあると言っていたwarningが,この修正だけでなぜ消えるのかは,不明です. 誰か知ってたら教えてください.