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

您同时给出了th和td的密钥，但是您

忘记在tr中为行变量写键

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

您可以详细了解here.

Answer 3

问题很可能是您的<tr>元素没有键。尝试给他们i作为密钥。

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

尝试使用 <tr key={i}>

数组或迭代器应具有唯一的“键”道具

3 个答案: