如何在reactjs中循环遍历嵌套对象？

Question

由于这在一个对象中，我这样做，但它不起作用。 如何通过循环获取“关键”字段？

  <div>
      <ul>
        {tickets && tickets.issues && Object.keys(tickets.issues).map((issue, i) =>
        (
          <li key={i}>
            Issue number: {tickets.issues.key}
          </li>
         ))}
      </ul>
  </div>

解

   <div>
      <ul>
       {this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, i) =>
       (
        <li key={i}>
           Issue number: {this.state.tickets.issues[i].key}
        </li>
      ))}
      </ul>
  </div>

Answer 1

查看您的响应图像，关键字段存在于issue []中，但不存在于字段中，因此它应该很好（不需要嵌套）：

{ Object.keys(tickets.issues).map((issue, i) => (
  <li key={issue.key}>
   Issue number: {issue.key}
  </li>
))}

如果您在字段中输入了密钥（在图像中未展开）

{ Object.keys(tickets.issues).map((issue, i) => (
  Object.keys(issue.fields).map(field=>(
 <li key={field.key}>
   Issue number: { field.key }
 </li>
)
))}

Answer 2

tickets.issues是一个对象数组，因此：

const { issues } = tickets;
issues.map(issue => console.log(issue.key));

Answer 3

一个简单的解决方案

  <div>
    <ul>
      {tickets && tickets.issues && Object.keys(tickets.issues).map((issue, i) => 
     (
      <li key={i}>
         Issue number: {tickets.issues.key}
      </li>
    ))}
    </ul>
  </div>