React表格数据为空求助：表头正常但表体无法填充数据

问题出在你tdData函数里的forEach调用上：forEach方法不会返回任何值（默认返回undefined），所以React没办法拿到需要渲染的<td>元素数组，自然没法渲染表体的行数据。

只需要把forEach换成map就行，因为map会遍历数组并返回一个新的元素数组，正好符合React渲染列表的要求。

修改后的tdData代码：

const tdData = () => {
  return batsmanAgainstTeamContent.map((item) => {
    return (
      <tr key={item.striker}> {/* 注意添加唯一key，避免React控制台警告 */}
        {
          Object.keys(item).map((key) => {
            return <td key={key}>{item[key]}</td>
          })
        }
      </tr>
    )
  })
}

额外提醒：React渲染列表元素时，必须给每个元素添加唯一的key属性，上面的代码已经给<tr>和<td>分别添加了对应key，避免出现不必要的控制台警告。

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