Впервые в Firestore, React и Redux. У меня есть документ, который содержит карту под названием «вопросы» (см. Желтое выделение на изображении 1 ниже). На этой карте есть объекты вопросов (подчеркнутые красным 1, 2, 3 на изображении 1). Я пытался динамически деконструировать массив карт вопросов, передавая данные каждого запроса в компонент отображения (чтобы он отображался как карточка в пользовательском интерфейсе).
Мой код
Приводит к ошибке, что «questions.map не является функцией».
const QuestionList = ({questions}) => { <------ Passed the "questions" map object into this react component.
console.log(questions); <----- Output of console log is found in Image 2. It appears to be correct.
return(
<div className='custom-question-list section'>
{ questions.map(question => { <------ Error states that questions.map is not a function.
console.log(question);
console.log(question.numberOfQuestions);
return (
<div key={question.id}>
<QuestionSummary question={question}/> <----- Simply trying to take each individual question object and pass it into this QuestionSummary component (which helps display the content of that question object.
</div>
)
})
}
</div>
)
}
IMAGE 1
IMAGE 2
введите описание изображения здесь
НАШЛИ РЕШЕНИЕ Благодаря ответу Дуга я смог найти решение. Однако для будущих читателей, которые могут столкнуться с этой проблемой, я включил код, решающий проблему, с которой я столкнулся. Вам необходимо сопоставить с помощью «Object.entries».
return(
<div className='custom-question-list section'>
{ Object.entries(questions).map(([key, question]) => (
<div key={key}>
<QuestionSummary question={question}/>
</div>
))
}
</div>
)