Reactjs 每个子级在React中都应该有一个唯一的键错误

我有一个生成行和头的表组件，虽然我认为每个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;
          });

有问题的表的开发人员工具

---

如果您已经粘贴了警告堆栈，那就太好了，但是从我在代码中看到的情况来看，请尝试在那里放置一个键

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>);
                }
              }
          });

var cells=cols.map（函数（colData）{
if（colData.key==“pairNo”）{
返回（{teamName}）；
}否则{
return（您正在递增“pairNo”本地，但使用item.pairNo生成键-我猜它将始终保持在相同的值上…
当我在生成行时考虑增加它时，变量仍然保持不变，但后来我将其移动到状态数据中…它不会影响任何内容。我还添加了警告堆栈…从我看到的情况来看，您认为我应该将键放在上面td元素而不是tr？关键始终必须在“iterable”元素上-因此在这种情况下，它显然是…或者换句话说-它必须在“map”中返回的元素上如果你实现了一个键，但仍然得到了警告-你提供的键不是唯一的-调试你的代码，你就会enlightned@jebbie我已调试：）我认为这些键是独一无二的…我还添加了react developer工具中的一个剪报来查看这些键…好吧，现在它变得非常奇怪了-我在与这种错误作斗争时总是遇到这样的情况…我现在没有答案了：Dstill对此有问题…尽管下面的答案都不起作用
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>);
                }
              }
          });