Javascript 使用React动态创建表行

我正在尝试使用React和React引导创建一个表，该表具有自定义数量的表行。该表应该存储关于某个视频游戏的玩家统计信息的数据，并且基于该视频游戏，统计信息可能会更改，因此这些行的行数和标题也必须能够动态更改。我想在保存当前统计信息列表的状态下创建一个数组，然后使用map函数将该数组映射到元素并呈现该表。但是，在尝试了几种方法之后，我无法获得任何自定义输入来渲染。代码如下：

类统计扩展组件{
建造师（道具）{
超级（道具）
此.state={
游戏：''，
玩家名称：[]，
职位：[]，
统计类别：[
“杀人”，
"死亡",，
“助攻”
]
}
}
renderTableRows（数组）{
返回(
名称
团队
位置
{array.map（项=>{
console.log（项目）
{item}
})
}
)
}
render（）{
const columnLength=this.state.player\u names.length
const statCols=this.state.stat\u类别
返回(
{this.renderTableRows（statCols）}
)
}
}

---

控制台还正确地记录状态（kills、death、assists）中的数据，因此问题在于呈现元素时。任何帮助都将不胜感激

在map函数中，

renderTableRows

中没有return语句

使用ES6箭头功能时，您可以：

• 不使用Return语句直接返回数据

  (args) => (returnedData);
  

• 或者添加一些逻辑，而不是直接返回

  (args) => {
    // Logic here
  
    return returnedData
  }
  

在第二种情况下，您需要一个return语句，因为您正在进行日志记录，如果您选择删除日志记录，请使用第一种方法

---

另外，请直接在您的问题中发布代码，因为使用图像会降低可读性，并且不会被搜索引擎索引。

您的map函数中没有return语句，在

renderTableRows

中

使用ES6箭头功能时，您可以：

• 不使用Return语句直接返回数据

  (args) => (returnedData);
  

• 或者添加一些逻辑，而不是直接返回

  (args) => {
    // Logic here
  
    return returnedData
  }
  

在第二种情况下，您需要一个return语句，因为您正在进行日志记录，如果您选择删除日志记录，请使用第一种方法

---

另外，请直接在问题中发布代码，因为使用图像会降低可读性，并且不会被搜索引擎索引。

您必须以单独的

tr

s呈现每个项目，而不是以一系列

th

s呈现

renderTableCols(array) {
  return array.map(item => <th>{item}</th>)
}

renderTableColValues(item, cols) {
  return cols.map(col => <td>{item[col]}</td>)
}

renderTableRows(array) {
  return array.map(item =>
    <tr>
      <td>{item.name}</td>
      <td>{item.team}</td>
      <td>{item.position}</td>
      {this.renderTableColValues(item, this.cols)}
    </tr>
  );
}

render() {
  return (
    <Table>
      <thead>
        <tr>
          <th>NAME</th>
          <th>TEAM</th>
          <th>POSITION</th>
          {this.renderTableCols(this.cols)}
        </tr>
      </thead>
      <tbody>
        {this.renderTableRows(items)}
      </tbody>
    </Table>
  );
}

renderTableCols（数组）{
返回array.map（item=>{item}）
}
renderTableColValues（项目，cols）{
返回cols.map（col=>{item[col]}）
}
renderTableRows（数组）{
返回array.map（项=>
{item.name}
{item.team}
{item.position}
{this.renderTableColValues（项，this.cols）}
);
}
render（）{
返回(
名称
团队
位置
{this.renderTableCols（this.cols）}
{this.renderTableRows（items）}
);
}

---

有关表格的更多信息

您必须以单独的

tr

s呈现每个项目，而不是以一系列

th

s呈现

renderTableCols(array) {
  return array.map(item => <th>{item}</th>)
}

renderTableColValues(item, cols) {
  return cols.map(col => <td>{item[col]}</td>)
}

renderTableRows(array) {
  return array.map(item =>
    <tr>
      <td>{item.name}</td>
      <td>{item.team}</td>
      <td>{item.position}</td>
      {this.renderTableColValues(item, this.cols)}
    </tr>
  );
}

render() {
  return (
    <Table>
      <thead>
        <tr>
          <th>NAME</th>
          <th>TEAM</th>
          <th>POSITION</th>
          {this.renderTableCols(this.cols)}
        </tr>
      </thead>
      <tbody>
        {this.renderTableRows(items)}
      </tbody>
    </Table>
  );
}

renderTableCols（数组）{
返回array.map（item=>{item}）
}
renderTableColValues（项目，cols）{
返回cols.map（col=>{item[col]}）
}
renderTableRows（数组）{
返回array.map（项=>
{item.name}
{item.team}
{item.position}
{this.renderTableColValues（项，this.cols）}
);
}
render（）{
返回(
名称
团队
位置
{this.renderTableCols（this.cols）}
{this.renderTableRows（items）}
);
}

有关表格的更多信息

规则： 当状态更改时，将调用基于类的组件的render方法。 问题：谁将改变国家？它会在组件内部生长吗？你有什么问题？您无法渲染任何内容吗？或者统计数据不是动态呈现的？如果要动态更改它，需要先更改状态

规则： 当状态更改时，将调用基于类的组件的render方法。

---

问题：谁将改变国家？它会在组件内部生长吗？你有什么问题？您无法渲染任何内容吗？或者统计数据不是动态呈现的？如果要动态更改它，需要先更改状态

我会给你一个类似的答案，告诉你你遇到了什么，但这有点不同，有一个很好的解决方案

因此，您试图创建一个动态表，但您将表行设置为静态，我所做的是让表接收头和数据的数组，然后创建所需的任意多的行或数据

这是密码

export function objectIntoTableData(object) {
 return Object.values(object).map((data, index) => {
   return  <td key={index}>{data}</td>;
  });
}

导出函数ObjectOnTableData（对象）{
返回Object.values（Object.map）（（数据，索引）=>{
返回{data}；
});
}

您必须将此索引更改为（value，index）=>，这正是我的用途

tableRows(data) {
 return data.map(value => {
   return <tr key={value.index}>{objectIntoTableData(value)}</tr>;
 });
}

tableRows（数据）{
返回data.map（值=>{
返回{objectIntoTableData（值）}；
});
}

{head.map（（值，索引）=>{
返回{value}；
})}
{this.tableRows（数据）}

而是在对象内部使用id或索引，因为map函数的索引回调用于键是不安全的

 <ReactTableUse 
     head={["#", "Cell1", "Cell2", "Cell3"]}
     data={[{id:1, test:1},{id:2, test:2}]} 
 />

---

我会给你一个类似的答案，告诉你你遇到了什么，但这是一种不同的解决方案

因此，您试图创建一个动态表，但您使表行成为静态的，我所做的是让表接收头和数据数组，然后创建尽可能多的行或数据