如何在嵌套数组中迭代

Question

您好，我的 JSON 结构是这样的，我需要遍历这些项目

[
  {
    "name": "About You",
    "questions": [
      {
        "questionText": "What is your surname?",
        "answers": [
          {
            "text": "Thomas"
          }
        ]
      },
      {
        "questionText": "Where do you work?",
        "answers": [
          {
            "text": "Finance"
          }
        ]
      },
    ]
  },
  {
    "name": "About Family",
    "questions": [
      {
        "questionText": "Childeren",
        "answers": [
          {
            "text": "Yes"
          }
        ]
      },
      {
        "questionText": "Married",
        "answers": [
          {
            "text": "No"
          }
        ]
      },
    ]
  },
  {
    "name": "Travel",
    "questions": [
      {
        "questionText": "Do you travel a lot?",
        "answers": [
          {
            "text": "Yes"
          }
        ]
      }
    ]
  }
]

我从这段代码开始，但我不知道如何显示所有嵌套项。 我应该使用另一个 map function 吗？ 我想要一种格式，可以显示带有 questionTexts 和答案文本的表格

{details.map((detail, i) => (
    <div key={i}>
      <div>{detail.name}</div>
      <div>{detail.questions ? detail.questions[0].questionText : ''}</div>
      <div>{detail.questions ? detail.questions[0].answers[0].text : ''}</div>
    </div>
  )
)}

谢谢你

Answer 1

我应该使用另一个 map function 吗？

是的

---

1. 一、map通过details数组
   details.map((detail, i) =>

2. Map 通过当前detail.questions
detail.questions.map((question) => (

3. 或者，对question.answers应用相同的逻辑
   question.answers.map((question) => (

一个小例子是我们展示了所有的问题：

 class Example extends React.Component { render() { const details = [{"name": "About You", "questions": [{"questionText": "What is your surname?", "answers": [{"text": "Thomas"} ] }, {"questionText": "Where do you work?", "answers": [{"text": "Finance"} ] }, ] }, {"name": "About Family", "questions": [{"questionText": "Childeren", "answers": [{"text": "Yes"} ] }, {"questionText": "Married", "answers": [{"text": "No"} ] }, ] }, {"name": "Travel", "questions": [{"questionText": "Do you travel a lot?", "answers": [{"text": "Yes"} ] } ] } ]; return ( details.map((detail, i) => ( <div key={detail.name} class='question'> <b>{detail.name}</b> { detail.questions.map((question) => ( <em key={question.questionText}> Question: {question.questionText} </em> )) } </div> )) ); } } ReactDOM.render(<Example />, document.body);

 .question { display: flex; flex-direction: column; margin-bottom: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

补充说明

• 将key={}更改为问题的名称，以确保它是唯一的
• 使用问题本身向嵌套的map()添加了一个键
  _{感谢@pilchard的注意}