数组或迭代器应该有一个唯一的“键”道具[重复]

Question

我试图显示一个从服务器获取数据并显示其中所有信息的表。代码正在从获取的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>;
  }
}

Answer 1

问题很可能是您的

if (i > this.props.users.length) {
    break;
} else {
    let row = (
      <tr> <--- You should have a key prop here

尝试使用

Answer 2

呈现React元素数组时，每个元素上都需要一个键，React才能知道如何更新每个元素。

const list = ["Apple", "Banana", "Orange"]

class Component extends React.Component {
  render() {
    return list.map(item => {
      return (
        <div key={item}>{item}</div>
      )
    })
  }
}

你可以在这里了解更多。

Answer 3

你给了他们一把钥匙但是你

忘记在tr中为行变量写入键