React.js / JSON对象，试图在嵌套的JSON对象中显示数据时卡住了

Question

我在尝试在reactjs的嵌套对象中显示某个值时陷入困境。我正在使用这种方法来处理一个嵌套对象，如下所示：

代码无效，无法显示此数据（无法从customfield_11400'值'中获取数据）

    {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>)
  })
});