Question

仅将表标题行呈现给网页。尽管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>
  );
}

我没有错误消息。

Answer 1

您只是缺少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语句。

Answer 2

每当在map()内使用render()时，在代码中，都需要在该map()内返回JSX。在<thead>中，您将JSX用圆括号包裹在map()中，但是在<tbody>中，您使用了花括号，该括号指示需要返回的表达式。请尝试返回如下所示的JSX。

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

为什么不呈现表数据？

2 个答案: