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

Question

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

我相信每个 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

有问题的表的 React 开发者工具...

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