React中如何在表格内将嵌套对象的Item和子项渲染到同一行

问题原因 #

• 你的两层map回调都没有正确返回JSX元素，第一层map直接定义了<td>但没有return语句，所以React不会渲染任何内容
• 没有给每行数据包裹<tr>标签，不符合HTML表格的结构要求
• 第二层map的返回值没有被外层接收，导致子项内容完全丢失

修复后代码 #

return (
    <div className="table">
      <table>
        <tr>
          <th>Time</th>
          <th>open</th>
          <th>high</th>
          <th>low</th>
          <th>close</th>
          <th>volume</th>
        </tr>
        {data &&
          Object.keys(data).map((item, index) => {
            // 外层返回tr标签包裹整行内容
            return (
              <tr key={index}>
                <td>{item}</td>
                {/* 渲染所有subitem的td，和父item放在同一行 */}
                {Object.keys(data[item]).map((subitem, ind) => {
                  return <td key={ind}>{data[item][subitem]}</td>;
                })}
              </tr>
            )
          })}
      </table>
    </div>
  );

注意事项 #

• 给列表渲染的元素加上key属性可以避免React抛出性能警告，实际生产环境建议用数据的唯一ID代替索引作为key值
• 要保证每个data[item]下的subitem数量刚好是5个（对应open/high/low/close/volume五个表头），不然会出现列错位的情况
• 如果箭头函数用了大括号{}包裹逻辑，必须显式写return语句，不然默认返回undefined，元素不会被渲染

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