使用 Response 动态创建表 React JS

Question

我目前收到返回这样一个数组的响应

 const response = [{
    time: 1,
    speed: 2,
    direction:3,
    image:'url'

    
  },{
    time: 1,
    speed: 2,
    direction:3,
image:'url'
  },{
    time: 1,
    speed: 2,
    direction:3,
    image:'url'
    
  },{
    time: 1,
    speed: 2,
    direction:3,
image:'url' 
  }]

如何制作第一列仅包含属性名称的表。 然后后续列包含来自响应的数据，分别使用图像 URL 作为 header 我以前从未在 JS 中使用过表。 它还需要是动态的，以便可以使用来自 object 的任意数量的键生成任意数量的响应结果，因为数组中的所有对象都将具有相同的键

理想情况下，我希望桌子看起来像这样

            image           image           image 
time          1               1               1 
speed         2               2               2
direction     3               3               3

Answer 1

不确定这是否是您想要的。 您可以遍历 object 的键和值。

  <table>
    <thead>
      <tr>
        <td />
        {response.map((el) => (
          <td>{el.image}</td>
        ))}
      </tr>
    </thead>
    <tbody>
      {Object.keys(response[0])
        .filter((k) => k !== "image")
        .map((k) => (
          <tr>
            <td>{k}</td>
            {response.map((r) => (
              <td>{r[k]}</td>
            ))}
          </tr>
        ))}
    </tbody>
  </table>