Какова наилучшая практика, когда вам нужно отобразить что-то, пока данные все еще извлекаются из родительского компонента?

#reactjs

Вопрос:

Очень часто я сталкиваюсь со сценарием, который, я думаю, очень распространен, когда мне нужно отобразить данные в дочернем компоненте, который поступает из props, но извлекается из api в родительском компоненте. При первом рендеринге данные все еще извлекаются, поэтому дочернему компоненту нечего отображать. Иногда я использую флаг загрузки и отрисовываю весь дочерний компонент, когда поступают данные, иначе я отрисовываю какое-либо сообщение о том, что данные все еще загружаются или я выполняю рендеринг null . Но что, если я хочу, чтобы компонент был там и заполнял данные только тогда, когда они поступали? Это очень утомительно, если у меня есть реквизиты, которые являются вложенными объектами, поэтому я должен определить структуру данных в состоянии родительского, чтобы я не обращался к объектам, которые не существуют, или я должен вручную проверить в дочернем компоненте, не являются ли они неопределенными. Итак, вопрос в том, есть ли какой-либо рекомендуемый способ сделать это? Как вы это делаете?

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

Ответ №1:

Одна из наиболее популярных практик — отображать строку: ‘N / A’, что означает «неприменимо», «недоступно» или «нет ответа».

Ответ №2:

На самом деле существует много способов. Наиболее распространенный способ — отобразить что-то, чтобы указать пользователю, что что-то загружается в фоновом режиме, и вы могли бы подождать, чтобы увидеть это.
Это может быть простой текст «Мы загружаем ваш контент …..»
Это может быть что-то вроде вращающейся иконки.
Или event лучше facebook preloader.