如何将数组中嵌套的对象数据渲染为key1、key2为表头的表格？

问题原因 #

你用Object.entries处理外层的this.state.message对象是错误的：外层对象包含Items/Count/ScannedCount三个属性，Object.entries转换后得到的是[['Items', 数组], ['Count', 4], ['ScannedCount', 4]]的键值对数组，每一项根本没有key1属性，自然取不到值。你需要的数据源是this.state.message.Items这个存放实际业务数据的数组，不需要额外做Object.entries转换。

修复后代码（实现key1、key2为表头的表格） #

render() {
  console.log(this.state.message); 
  // 直接取Items数组作为数据源，加空数组兜底避免报错
  const dataList = this.state.message.Items || [];
  return (
    <div>
      <div className="viewall">
        {/* 标准表格结构 */}
        <table border="1" style={{borderCollapse: 'collapse', width: '100%'}}>
          {/* 表头 */}
          <thead>
            <tr>
              <th>key1</th>
              <th>key2</th>
            </tr>
          </thead>
          {/* 数据行 */}
          <tbody>
            {dataList.map((data, index) => {
              return (
                <tr key={index}>
                  <td>{data.key1}</td>
                  <td>{data.key2}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

补充说明 #

如果你的key1字段值是全局唯一的，建议把key={index}替换为key={data.key1}，可以提升React列表渲染的性能。表格的边框、间距样式可以根据自己的需求调整。

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