Блог

Главная - Вопросы по программированию - Как обрабатывать useContext при ожидании выборки данных

Как обрабатывать useContext при ожидании выборки данных

#reactjs #react-hooks #use-context

#reactjs #реагирующие хуки #использовать-контекст

Вопрос:

Я использую useContext для извлечения документов из MongoDB.

Я знаю, что моему приложению требуется некоторое время, чтобы извлечь данные, сохранить их в состояние, а затем передать контекст дочерним элементам.

Мой вопрос в том, как мне обрабатывать время между выборкой и рендерингом без возникновения ошибок.

Вот пример кода, откуда projects поступают данные useContext :

РОДИТЕЛЬСКИЙ

 <Container>
    <div className={classes.cardsContainer}>
        {projects.length > 0 amp;amp; projects.map((project) => <ProjectCard key={project._id}  project={project} />)}
    </div>
</Container>

Я сопоставляю projects и передаю каждый из них в качестве реквизита <ProjectCard /> .

Однако в дочернем элементе, если я попытаюсь отобразить project.projectName (это свойство в объекте) в дочернем элементе.

Если я console.log(project.projectName) в дочерних элементах, я получаю сообщение об ошибке TypeError: Cannot read property 'projectName' of undefined .

Я знаю, что могу решить эту проблему, используя project amp;amp; project.projectName , однако, есть ли лучший способ сделать это?

Должен быть более элегантный способ сделать это, чтобы мне не приходилось object amp;amp; object.property каждый раз, когда я хочу использовать контекст.

Комментарии:

1. необязательно-цепочка ? Вы также можете показывать счетчик во время извлечения данных из серверной части.

2. @Yousaf — можете ли вы использовать необязательную цепочку таким образом, чтобы вы могли использовать деструктурирование? Я передаю реквизиты в компонент с деструктурированием, так как бы вы подошли к этому?

3. Если вы разрушаете неопределенное свойство из объекта, значение имени разрушенного свойства будет неопределенным, вы не получите ошибку.

4. Каким project образом значение не определено? содержат ли проекты нулевые или неопределенные объекты? Если да, то как насчет фильтрации? например, map(project => project ? <ProjectCard> : null)