Question

我通常是React和前端开发的初学者。这是显示表格的“简单”代码。

function TableHeader() { 
    return (
        <thead>
            <tr>
                <th>Name</th>
                <th>Job</th>
            </tr>
        </thead>
    );
  }


function TableDataRow(row, index) {
    return (
        <tr key={index}>
            <td>{row.name}</td>
            <td>{row.job}</td>
        </tr>
    )
}


function TableBody(props) { 
    const characterData = props.characterData;
    return (
        <tbody>
            {characterData.map((row, index) => <TableDataRow row={row} index={index}/>)}
        </tbody>
    );
  }



class Table extends Component {
    render() {
        const { characterData } = this.props;

        return (
            <table>
                <TableHeader />
                <TableBody characterData={characterData} />
            </table>
        );
    }
}

class App extends Component {
  render() {
    const characters = [
      {
          'name': 'Charlie',
          'job': 'Janitor'
      },
      {
          'name': 'Mac',
          'job': 'Bouncer'
      },
      {
          'name': 'Dee',
          'job': 'Aspring actress'
      },
      {
          'name': 'Dennis',
          'job': 'Bartender'
      }
  ];

  return (
    <div className="container">
       <Table characterData={characters} />
    </div>
    );
  }
}

错误如下：

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

检查TableBody的渲染方法。看到   https://banned-fb.example.com/react-warning-keys了解更多信息。       在TableDataRow中（在Table.js：30）       在TableBody中（在Table.js：44）       在表格中（在Table.js：42）       在表格中（在App.js：28）       在div中（在App.js：27）       在App中（位于src / index.js：6）

表中的数据行为空。我认为对 TableDataRow 的调用存在问题。我可能做错了什么？

截屏：

Answer 1

关键只是警告，但您也应该修复它，原因是什么都不渲染，因为您的组件是这样的：

function TableDataRow(row, index) {...}  // WRONG

Function Component仅获得一个props参数，您需要执行以下操作之一：

function TableDataRow(props) {
    const {row, index} = props;  // get row and index out of props inside function
    ... 
}

OR

function TableDataRow({ row, index }) {...}  // destructure the props in parameter

现在，有关修复键警告：
您无需向key内的<tr>提供TableDataRow到TableDataRow，而是需要提供

function TableDataRow({ row }) { // you have a little error here too, row should be inside curly braces or use props and get row from props inside the function
  return (
    <tr>  // no need of key
        <td>{row.name}</td>
        <td>{row.job}</td>
    </tr>
  )
}


function TableBody(props) { 
  const characterData = props.characterData;
  return (
    <tbody>
        {characterData.map((row, index) => <TableDataRow row={row} key={index}/>)}  // key should be here
    </tbody>
  );
}

的密钥，如下所示：

api

此外，您还应该将index用作最后的选择（原因请参见docs）。如果您的数据来自id，则每个项目都可能有一个{{1}}，您可以将其用作键，或者每个字符可能还有其他独特之处，如果不是，则可以使用索引。

Answer 2

import React from 'react';
function TableHeader() {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Job</th>
      </tr>
    </thead>
  );
}


function TableBody(props) {
  const characterData = props.characterData;

  return (<tbody>
    {characterData.map((row, index) =>
      <tr key={index}>
        <td>{row.name}</td>
        <td>{row.job}</td>
      </tr>)}
  </tbody>
  );
}



class Table extends React.Component {
  render() {
    const { characterData } = this.props;

    return (
      <table>
        <TableHeader />
        <TableBody characterData={characterData} />
      </table>
    );
  }
}

class Hello extends React.Component {
  render() {
    const characters = [
      {
        'name': 'Charlie',
        'job': 'Janitor'
      },
      {
        'name': 'Mac',
        'job': 'Bouncer'
      },
      {
        'name': 'Dee',
        'job': 'Aspring actress'
      },
      {
        'name': 'Dennis',
        'job': 'Bartender'
      }
    ];

    return (
      <div className="container">
        <Table characterData={characters} />
      </div>
    );
  }
}
export default Hello;

在这里找到您的工作解决方案。

Stackblitz Link

反应不在表行中显示数据

2 个答案:

OR