javascript - 在 React 中动态迭代 json 对象数组

Question

我正在执行一个返回 json 对象数组的 api 调用。以下是我期望返回的示例:

[
  {"id": 1, "name": "Pete", "age": 22},
  {"id": 2, "name": "Sarah", "age": 32},
  {"id": 3, "name": "Marshall", "age": 33}
]

我试图循环该对象以创建表行，同时将每个 json 对象中的每个键动态分配为属性，而无需显式声明该键。例如，我想将此对象渲染为以下结构:

<tr key=1>
  <td>Pete</td>
  <td>22</td>
</tr>
<tr key=2>
  <td>Sarah</td>
  <td>32</td>
</tr>
<tr key=3>
  <td>Marshall</td>
  <td>33</td>
</tr>

我的旧代码如下所示:

var MyMembers= this.props.Members.map((Member) => {
  return (
    <tr key={Member.id}>
      <td>{Member.name}</td>
      <td>{Member.age}</td>
    </tr>
  )
});

在这段遗留代码中，我明确调用“name”和“age”属性来创建“td”标签。有没有一种方法可以循环遍历每个对象并为该对象中的每个键创建一个“td”值，而无需显式调用键名称？

Answer 1

这应该有效:

 var MyMembers= this.props.Members.map((Member) => {
  var keys = Object.keys(Member)
  var index = keys.indexOf("id");
  if (index > -1) {
     // removes the "id" element from the keys.
     keys.splice(index, 1);
  }
  var divs = keys.map(k => <td>{Member[k]}</td>)
  return (
   <tr key={Member.id}>
   divs
   </tr>
  )
 });