React表格仅渲染表头不渲染数据，如何排查解决？

嘿，我一眼就瞅出问题所在啦！你这是React里超常见的小疏忽——map回调函数里没返回JSX元素，所以数据虽然能在控制台正常打印，但React根本拿不到要渲染的内容～

问题根源 #

你在<tbody>里的两次map调用，都用了大括号{}包裹代码块，但没有通过return把<tr>和<td>返回给React。箭头函数的规则是：如果用小括号()包裹内容，会自动隐式返回；但如果用大括号{}，必须显式写return语句，否则函数返回undefined，React自然不会渲染任何东西。

另外还发现个小笔误：align- middle多了个空格，得改成align-middle，不然样式可能不生效哦。

修正方案（两种可选） #

方案1：用箭头函数隐式返回（把大括号换成小括号）

这是最简洁的写法，适合逻辑简单的场景：

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>
          {/* 把外层大括号换成小括号，隐式返回<tr> */}
          {this.props.sales.map((row, row_key) => (
            <tr key={`row-${row_key}`}>
              {/* 内层map同样用小括号隐式返回<td> */}
              {this.tableHeader().map((value, key) => (
                <td scope="col" className="align-middle" key={`data-${key}`}>
                  {row[value]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

方案2：显式添加return语句

如果后续要在map里加更多逻辑，这种写法更清晰：

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>元素
            return (
              <tr key={`row-${row_key}`}>
                {this.tableHeader().map((value, key) => {
                  // 显式返回<td>元素
                  return (
                    <td scope="col" className="align-middle" key={`data-${key}`}>
                      {row[value]}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

改完之后，表格的tbody数据就能正常渲染啦～

内容的提问来源于stack exchange，提问作者Michael93