Почему .map, .length не работает с массивом, когда он печатает массив

Question

Он печатает массив в консоли, но когда я использую .map или .length, он печатает undefined или выдает ошибку, .map is not a function.

Код внутри метода рендеринга:

let { faqs } = this.props;
   console.log(faqs); // prints array 
   console.log(this.props.faqs.length) // prints undefined
   let questionList = faqs.length > 0 ? faqs.map((faq) => {
       return <div key={faq._id}>
          <p className='mb-0'>Question: {faq.question}</p>
          <p className='mb-0'>Answer: {faq.answer}</p>
       </div>
   }) : <div> no questions found.</div>

Это вывод консоли:

{faqs: Array(0)}
undefined
{faqs: Array(5)}
faqs: Array(5)
0: {_id: "5cb44201cdd6fe2749c7ced5", question: "question.1", answer: "this.is.an.answer", __v: 0}
1: {_id: "5cb44255cdd6fe2749c7ced6", question: "sadsfghjkl;", answer: "dsfghjkl;'↵", __v: 0}
2: {_id: "5cb451dbcdd6fe2749c7ced7", question: "dscsfghjk", answer: "sdfghjkl", __v: 0}
3: {_id: "5cb4553ccdd6fe2749c7ced8", question: "weeweqw", answer: "dsadasdsad", __v: 0}
4: {_id: "5cb457b2cdd6fe2749c7ced9", question: "q.5.", answer: "answer.undefined", __v: 0}
undefined

Answer 1

Согласно вашим журналам, похоже, что faqs - это объект, содержащий массив с именем faqs. Возможно, это ошибка, и вы хотите передать массив напрямую вместо объекта, содержащего массив.

<MyComp faqs={[...]} />

Если это так, const { faqs } = this.props даст вам массив, и ваш код будет работать.

---

Однако, если вы передадите данные как <MyComp faqs={{ faqs: [...] }} />, то вы сможете получить доступ к внутреннему массиву с помощью присваивания, например:

const { faqs: { faqs } } = this.props;

Это исправит ошибки, которые возникают при .length возврате undefined и .map is not a function.

Тогда вы продолжите в том же духе, сначала проверив, является ли faqs правдивым, прежде чем позвонить .length или .map:

const questionList = faqs && faqs.length ? faqs.map(faq => { ...

---

Обратите внимание, что вы также можете назначить значения по умолчанию в назначении деструктурирования, чтобы массив всегда был правильно определен и достоверен, что исключает загрязнение кода проверками && везде:

const { faqs: { faqs = [] } = {} } = this.props;

Тогда вы можете напрямую получить доступ к .length и .map:

const questionList = faqs.length ? faqs.map(faq => {
  return <div key={faq._id}>
    <p className='mb-0'>Question: {faq.question}</p>
    <p className='mb-0'>Answer: {faq.answer}</p>
  </div>
}) : <div> no questions found.</div>

Answer 2

В вашем случае изначально нет значений для faqs. .map & .length работает только с массивом. Вот почему он возвращает неопределенное

, поэтому вы должны выполнить условие if на faqs

if(faqs)
  console.log(faqs.length)

И

faqs && faqs.map(item => return {
   .......
} )

Answer 3

в журналах консоли кажется, что prop faqs - это объект с ключевым faqs, который является массивом, поэтому в вашем коде выполните faqs.faqs.length or map