时间戳

首页 > 解决方案 > 为什么表格数据没有被渲染？

javascript - 为什么表格数据没有被渲染？

问题描述

只有表格标题行被呈现到网页。即使标签内的row[value]数据<td>被正确记录到控制台，也不会呈现标签内的数据。我应该怎么做？

我尝试将其中的代码抽象tbody为一个函数，然后在其中调用该函数，tbody但这也不会呈现数据。

tableHeader = () => {
  let arr = [];
  let row = this.props.sales[0];
  for (var key in row) {
    arr.push(key);
  }
  return arr;
};

render() {
  return (
    <div className="sales-leader-board">
      <table className="table table-striped">
        <thead>
          <tr bgcolor="lightblue">
            {this.tableHeader().map((name, key) => (
              <th scope="col" className="align-middle" key={name}>
                {name}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {this.props.sales.map((row, row_key) => {
            <tr key={`row-${row_key}`}>
              {this.tableHeader().map((value, key) => {
                <td
                  scope="col"
                  className="align-
                              middle"
                  key={`data-${key}`}
                >
                  {row[value]}
                </td>;
                console.log('row[value]', row[value]);
              })}
            </tr>;
          })}
        </tbody>
      </table>
    </div>
  );
}

我没有错误信息。

标签： javascriptreactjs

解决方案

你只是错过了return陈述:) 你必须返回一些东西map才能渲染到 dom。

<tbody>
  {
    this.props.sales.map((row, row_key) => {
      return (
        <tr key={`row-${row_key}`}>
          {this.tableHeader().map((value, key) => {
            return (
              <td scope="col" className="align- middle" key={`data-${key}`}> 
                {row[value]}
               </td>
            );
          })}
      </tr>);
    })
  }
</tbody>

或者，正如您为您所做的那样，您thead可以将箭头函数的主体括起来以省略该return语句。

推荐阅读