Reactjs / JSON 对象，试图在嵌套的 JSON 对象中显示数据

Question

我试图在 reactjs 的嵌套对象中显示某个值。我使用的这种方法适用于一个嵌套对象，如下所示：

代码不起作用，无法显示此数据（无法从 customfield_11400 'value' 获取数据）

    {this.state.tickets && this.state.tickets.issues && this.state.tickets.issues.fields && this.state.tickets.issues.fields.customfield_11400 && Object.keys(this.state.tickets.issues.fields.customfield_11400).map((issue, i) =>
    (
       <tr key={i}>
          <td> {this.state.tickets.issues.fields.customfield_11400[i].value} </td>
       </tr>
    ))}

代码可以显示此数据（我能够获取“键”值）

      {this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, i) =>
      (
         <tr key={i}>
            <td> {this.state.tickets.issues[i].key} </td>
         </tr>
      ))}

尝试此解决方案似乎不起作用

  { this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, issue_index) => (

      this.state.tickets && this.state.tickets.issues && this.state.tickets.issues.fields && this.state.tickets.issues.fields.customfield_11400 && Object.keys(this.state.tickets.issues.fields.customfield_11400).map((airlineName, field_index)=>(
       <li key={field_index}>
         Airline Name: {this.state.tickets.issues[issue_index].fields.customfield_11400[field_index].value }
       </li>
     )
   )))}

尝试此解决方案 2 似乎不起作用

const fields = () => this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, issue_i) => {
  return this.state.tickets && this.state.tickets.issues && this.state.tickets.issues.fields && this.state.tickets.issues.fields.customfield_11400 && Object.keys(this.state.tickets.issues.fields.customfield_11400).map((field, field_i) => {
    return (<div> {this.state.tickets.issues[issue_i].fields.customfield_11400[issue_i].value} </div>)
  })
});

  return 
  (
   {fields()}
  );

Answer 1

根据你上面的图片，issues 和customfield_11400 是数组，因此，你需要这样访问它：

this.state.tickets.issues[issue_index].fields.customfield_11400[field_index].value

由于您正在循环处理问题，i 是问题的索引。您可能需要另一个循环遍历 customfield_11400，或者如果 customfield_11400 只有一个元素，您可以使用如下内容：

this.state.tickets.issues[i].fields.customfield_11400[0].value

编辑：

要遍历两个数组，您可以执行以下操作，但是，您必须添加 空检查：

const fields = this.state.tickets.issues.map(issue => {
  return issue.fields.customfield_11400.map(field => {
    return (<div> {field.value} </div>)
  })
});