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

函数TableHeader（）{
返回(
名称
工作
);
}
函数TableDataRow（行，索引）{
返回(
{row.name}
{row.job}
)
}
函数表体（props）{
const characterData=props.characterData；
返回(
{characterData.map（（行，索引）=>）}
);
}
类表扩展组件{
render（）{
const{characterData}=this.props；
返回(
);
}
}
类应用程序扩展组件{
render（）{
常量字符=[
{
“姓名”：“查理”，
“工作”：“看门人”
},
{
'name'：'Mac'，
“工作”：“保镖”
},
{
“name”：“Dee”，
‘工作’：‘当演员’
},
{
“姓名”：“丹尼斯”，
“工作”：“调酒师”
}
];
返回(
);
}
}

错误如下：

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

检查

表体的渲染方法

。看见 了解更多信息。 在TableDataRow中（在Table.js:30中） 在表体中（见表js:44） 表中（表js:42） 在表中（见App.js:28） 在div中（在App.js:27中） 应用程序内（位于src/index.js:6）

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

屏幕截图：

---

关键的事情只是一个警告，但您也应该修复它，因为您有这样的组件，所以什么都没有呈现：

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

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

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

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

或

---

现在关于修复键警告：
您需要向

表数据行

中的

表数据行

提供键，而不是向

表数据行

提供键，如下所示：

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

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

函数TableDataRow（{row}）{//这里也有一个小错误，行应该在花括号内，或者使用props并从函数内的props获取行
返回(
//不需要钥匙
{row.name}
{row.job}
)
}
函数表体（props）{
const characterData=props.characterData；
返回(
{characterData.map（（行，索引）=>）}//键应该在这里
);
}

此外，您还应该使用索引作为最后的手段（请参阅了解原因）。如果您的数据来自

api

每个项目可能都有一个

id

，您可以使用该id作为键，或者每个字符可能有其他唯一的内容，如果没有，则可以使用索引。

从“React”导入React；
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;

函数TableHeader（）{
返回(
名称
工作
);
}
功能桌面（道具）{
const characterData=props.characterData；
返回(
{characterData.map（（行，索引）=>
{row.name}
{row.job}
)}
);
}
类表扩展了React.Component{
render（）{
const{characterData}=this.props；
返回(
);
}
}
类Hello扩展了React.Component{
render（）{
常量字符=[
{
“姓名”：“查理”，
“工作”：“看门人”
},
{
'name'：'Mac'，
“工作”：“保镖”
},
{
“name”：“Dee”，
‘工作’：‘当演员’
},
{
“姓名”：“丹尼斯”，
“工作”：“调酒师”
}
];
返回(
);
}
}
导出默认Hello；

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

---

为了便于将来参考，您可以在此处粘贴代码，并添加可选的stackblitz链接。