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

Question

假设我有这个 faq 数组作为我的状态之一：

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)

如何正确循环这个嵌套对象？

标签： reactjsloopsnested-loops

Answer 1

您必须将标签放在父标签中。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>
);

}

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