javascript - 数组或迭代器应具有唯一的“键”属性

This question already has answers here:

Understanding unique keys for array children in React.js
                                
                                    （11个答案）
                                
                        
                        
                            ReactJS Warning: Each child in an array or iterator should have a unique “key” prop
                                
                                    （1个答案）
                                
                        
                2年前关闭。
            
        

我试图显示一个表，该表从服务器获取数据并显示其中的所有信息。代码从获取的API打印我的表头和第一个对象的信息。

它给我一个错误。


  警告：数组或迭代器中的每个子代均应具有唯一的“键”
  支柱。检查MyTable的渲染方法”

import React from "react";

export default class MyTable extends React.Component {
  constructor(props) {
    super(props);

    console.log(props);
  }

  createTable = () => {
    let table = [];

    let tableHeader = (
      <thead>
        <tr>
          {this.props.columns.map(column => {
            return <th key={column.name}>{column.name}</th>;
          })}
        </tr>
      </thead>
    );

    let tableRows = [];
    for (
      let i = this.props.pgNo * this.props.maxItems;
      i < i + this.props.maxItems;
      i++
    ) {
      if (i > this.props.users.length) {
        break;
      } else {
        let row = (
          <tr>
            {this.props.columns.map(column => {
              return (
                <td key={column.key}>{this.props.users[i][column.key]}</td>
              );
            })}
          </tr>
        );

        tableRows.push(row);
      }
      let tableBody = <tbody>{tableRows}</tbody>;
      return (
        <table>
          {table}
          {tableHeader}
          {tableBody}
        </table>
      );
    }
  };
  render() {
    return <div className="col-sm-10">{this.createTable()}</div>;
  }
}

最佳答案

您同时输入了t和td的密钥，但是您


  忘记在tr中为行变量写键