Reactjs/JSON对象，试图在嵌套的JSON对象中显示数据时卡住了 [英] Reactjs / JSON object, stuck trying to display the data within a nested JSON object

问题描述

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

I am stuck trying to display a certain value in a nested object in reactjs. This approach i'm using works for the a one nested object as follows:

代码无效，无法显示此数据(无法从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()}
  );

推荐答案

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

According to your image above, issues and customfield_11400 are arrays, therefor, you need to access it like this:

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

因为您正在遍历问题，所以i是问题的索引.您可能需要另一个循环遍历customfield_11400，或者，如果customfield_11400仅具有一个元素，则可以使用以下内容:

Since you are looping over the issues i is the index of the issue. You might need another loop looping over customfield_11400, or if customfield_11400 only have one element you can use something like this:

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

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

To loop over both arrays, you could do something like this, however, you will have to add null checks:

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

这篇关于Reactjs/JSON对象，试图在嵌套的JSON对象中显示数据时卡住了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！