Question

它正在控制台中打印一个数组，但是当我使用.map或.length时，它会打印undefined或给出错误信息.map is not a function。

代码位于render方法内部

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

在控制台日志中，似乎prop常见问题是一个具有键常见问题的对象，该对象是数组，因此在您的代码中执行faqs.faqs.length or map

Answer 3

在您的情况下，最初没有常见问题解答值。 .map和.length仅适用于数组。那就是为什么它返回未定义的原因

所以您必须对faqs做一个if条件

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

和

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

为什么.map，.length在打印数组时无法在数组上工作

3 个答案: