React不在表行中显示数据

Question

我是一个初学者一般反应和前端开发。这里有一个显示表格的“简单”代码。

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

错误如下：

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

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

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

截图：

Answer 1

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链接

Answer 2

关键的是一个警告，但您也应该修复它，原因是没有渲染，因为您有这样的组件：

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

函数组件仅获取一个参数，即道具，您需要做的是：

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

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

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，每个项目都可能有一个id，你可以用它作为键，或者每个字符都有其他独特的东西，如果没有，可以使用index。