如何在反应中循环嵌套数组？

Question

假设我将此常见问题解答数组作为我的状态之一：

this.state = {
    faqs: [
        {
            section: "Section One",
            faqList: [
                {
                    question: "Q1",
                    answer: "A1"
                },
                {
                    question: "Q1",
                    answer: "A1"
                }
            ]
        },
        {
            section: "Section Two",
            faqList: [
                {
                    question: "Q1",
                    answer: "A1"
                },
                {
                    question: "Q1",
                    answer: "A1"
                }
            ]
        }
    ]
}

我想渲染它们。这就是我目前尝试这样做的方式：

render() {

    const faqs = this.state.faqs;

    return (
    <div>   
        {faqs.map(faqSec => {

            return (
                <h2>{faqSec.section}</h2>

                {faqSec.faqList.map(faq => {
                    return (
                        <p>faq.question</p> 
                        <p>faq.answer</p>                                           
                    )
                })}

            )
        })}
    </div>
    );
}

但是由于嵌套的map函数出现了错误：

SyntaxError: Unexpected token, expected , (80:8)

如何正确地遍历这个嵌套对象？

Answer 1

您需要 return 地图结果列表中的根元素：

return (
  <div>{/* use key here */}
   <h2>{faqSec.section}</h2>
   {faqSec.faqList.map(faq => {
     return (
      <div>{/* use key here */}
       <p>faq.question</p>
       <p>faq.answer</p>                                           
      </div>
     )
   })}
 </div>
)

或者，您可以 return 元素数组：

return [
   <h2>{faqSec.section}</h2>,{/* use key here */}
   {faqSec.faqList.map(faq => {
     return [
       <p>faq.question</p>,{/* use key here */}
       <p>faq.answer</p>{/* use key here */}
     ]
   })}
 ]

或者，即使你可以使用 Fragment:

return (
      <React.Fragment>{/* use key here */}
       <h2>{faqSec.section}</h2>
       {faqSec.faqList.map(faq => {
         return (
          <React.Fragment>{/* use key here */}
           <p>faq.question</p>
           <p>faq.answer</p>                                           
          </React.Fragment>
         )
       })}
     </React.Fragment>
    )

您也可以对 <React.Fragment></React.Fragment> 使用速记语法：

<></>

并非所有工具都支持速记语法。如果您想使用 shorthand 语法，请参阅 this。

确保使用上面注释的唯一密钥。

Answer 2

您必须将标签放在父标签中。 React 不会单独打印这两个标签。您必须将这两个标签与父标签绑定。

render() {

const faqs = this.state.faqs;

return (
 <div>   
    {faqs.map(faqSec => {

        return (
           <div>
              <h2>{faqSec.section}</h2>

              {faqSec.faqList.map(faq => {
                  return (
                     <div>
                        <p>{faq.question}</p> 
                        <p>{faq.answer}</p> 
                     </div>                                          
                  )
              })}
          </div>
        )
    })}
</div>
);

}

您还错过了代码中的 {} 括号。请检查此代码。我希望它对你有用。

如何在反应中循环嵌套数组？

How to loop over nested array in react?

loops

nested-loops

reactjs