Ошибка "сопоставления" через массив объектов документа Firestore. (Реагировать-Redux) - PullRequest
0 голосов
/ 03 августа 2020

Впервые в 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 enter image description here



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>

)

1 Ответ

1 голос
/ 03 августа 2020

Я пытался динамически деконструировать массив карт вопросов

Не существует такой вещи, как «массив карт». Тип поля будет либо карта или массив. В вашем случае это карта, а не массив.

Сообщение об ошибке сообщает вам, что questions не имеет метода с именем map. Это потому, что это не массив - это простой старый объект JavaScript, пары ключ / значение которого совпадают с парами в поле карты. (Несмотря на то, что ключи вашей карты кажутся числами, на самом деле это просто строки, которые выглядят как числа.)

Если вы хотите перебрать пары ключ / значение в объекте, существует множество способов сделайте это, как описано здесь: Как перебрать объект JavaScript?

...