各子供には固有のキーエラーがあります。

Question

テーブルコンポーネントで行とヘッダーが生成されていますが、各tr要素に固有のキーがあると思われますが、警告が表示されます。私は同じ問題でいくつかの他の質問を読んだが、それでも答えを出すことができない...誰かが私にこれに助けてくれるなら、私は感謝するだろう。

これは、問題のコードです：

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `exports`. 
in td (created by exports) 
in exportswarning @ app.js:23941validateExplicitKey @ app.js:13818validateChildKeys @ app.js:13838createElement @ app.js:13906(anonymous function) @ app.js:24284generateRows @ app.js:24237exports_render @ app.js:24193_renderValidatedComponentWithoutOwnerOrContext @ app.js:9520_renderValidatedComponent @ app.js:9547performInitialMount @ app.js:9071mountComponent @ app.js:8950mountComponent @ app.js:16707performInitialMount @ app.js:9085mountComponent @ app.js:8950mountComponent @ app.js:16707mountComponentIntoNode @ app.js:14824perform @ app.js:20206batchedMountComponentIntoNode @ app.js:14845perform @ app.js:20206batchedUpdates @ app.js:13268batchedUpdates @ app.js:17911_renderNewRootComponent @ app.js:15004_renderSubtreeIntoContainer @ app.js:15090render @ app.js:15111194../StartButton @ app.js:24423s @ app.js:1e @ app.js:1(anonymous function) @ app.js:1 

：私はすべてのtrは異なる鍵を持っているが、それでも警告が立ち上がる...

がスタックを警告信じる

render: function() { 
      var headerComponents = this.generateHeaders(), 
       rowComponents = this.generateRows(); 

      return (
       <table> 
        <thead>{headerComponents}</thead> 
        <ReactCSSTransitionGroup transitionName="fade" transitionEnterTimeout={500} transitionLeaveTimeout={300} transitionAppearTimeout={500} transitionAppear={true} component="tbody"> 
        {rowComponents} 
        </ReactCSSTransitionGroup> 
       </table> 
     ); 

     }, 

     generateHeaders: function() { 
      var cols = this.props.cols; // [{key, label}] 

      // generate our header (th) cell components 
      return cols.map(function(colData) { 
       return <th key={colData.key}>{colData.label}</th>; 
      }); 
     }, 

     generateRows: function() { 
      var cols = this.props.cols, // [{key, label}] 
       data = this.props.data; 

      var propsRound = this.props.round; 

      var round=1; 
      var pairNo=1; 
      var oldRound=0; 
      var teamName=null; 
      var first=true; 
      var delay=100; 
      return this.state.data.map(function(item, i) { 
       var htmlExcerpt = null; 
       var len = Object.keys(cols).length; 
       if (oldRound !== item.round) { 
        htmlExcerpt = <tr key={'round'+item.round} style={{ 'transition-delay': `${i * delay}ms` }}><td colSpan={len}>Round: {item.round}</td></tr>; 
        oldRound = item.round; 
       } 
       var cells = cols.map(function(colData) { 
        if (colData.key == "pairNo") { 
        return (<td> {i+1} </td>); 
        } else { 
        if (colData.key == "homeTeam" || colData.key == "awayTeam") { 
         teamName = config.teams[item[colData.key]].name; 
         return (<td> {teamName} </td>); 
        } else { 
         return (<td> {item[colData.key]} </td>); 
        } 
        } 
       }); 
       if (htmlExcerpt !== null) { 
       return [htmlExcerpt,<tr key={'round'+item.round+'_'+item.pairNo} style={{ 'transition-delay': `${i * delay}ms` }}>{cells}</tr>]; 
       } else { 
       return <tr key={'round'+item.round+'_'+item.pairNo} style={{ 'transition-delay': `${i * delay}ms` }}>{cells}</tr>; 
       } 
       pairNo=pairNo+1; 
      }); 

問題のテーブルの開発者ツールに反応してください...

Answer 1

それはあなたが警告スタックを貼り付けている場合はよかったが、私はあなたのコードで見たものから、ローカルで「pairNo」をインクリメントしかし作るためにitem.pairNoを使用しているが

var cells = cols.map(function(colData) { 
       if (colData.key == "pairNo") { 
       return (<td key={'someKey}> {i+1} </td>); 
       } else { 
       if (colData.key == "homeTeam" || colData.key == "awayTeam") { 
        teamName = config.teams[item[colData.key]].name; 
        return (<td key={'someKey}> {teamName} </td>); 
       } else { 
        return (<td key={'someKey}> {item[colData.key]} </td>); 
       } 
       } 
      }); 

Answer 2

をキーを入れてみただろうキー - 私はいつも同じ値にとどまると思います...