javascript - 数组或迭代器应该有一个唯一的 "key"属性

Question

这个问题已经有答案了:

Understanding unique keys for array children in React.js (27 个回答)

ReactJS Warning: Each child in an array or iterator should have a unique "key" prop (1 个回答)

已关闭 5 年前。

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

它给了我一个错误。

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 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>;
  }
}

Answer 1

您为 th 和 td 提供了 key ，但您

forgot to write a key in tr for row variable