Как перебрать вложенный массив в реагировать? - PullRequest
Новая
       6

Как перебрать вложенный массив в реагировать?

0 голосов
/ 28 августа 2018

Допустим, у меня есть этот массив 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>
    );
}

Однако из-за функции вложенной карты возникает ошибка: 

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

Как правильно перебрать этот вложенный объект?

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

Вы должны поместить теги в родительские теги. 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>
);

}

Вам также не хватает скобки {} в вашем коде. Пожалуйста, проверьте этот код. Я надеюсь, что это будет работать для вас.

0 голосов
/ 28 августа 2018

Вам необходимо вернуть список результатов карты в корневой элемент: 

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 [
   <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 */}
     ]
   })}
 ]

Или даже вы можете использовать Фрагмент : 

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>: 

<></>

Не все инструменты поддерживают сокращенный синтаксис. См. this , если вы хотите использовать сокращенный синтаксис.

Убедитесь, что вы используете уникальный ключ, как указано выше.

...