Задать вопрос
@Evelate

Тэг срабатывает быстрее, чем условие в react компоненте, как исправить?

Реакт компонент:
export default function Downloading(props) {
  return (
    <>
      {
        props.isDownload
        ? <>{props.children}</>
        : <div>Загрузка...</div>
      }
    </>
  )
}

Как я понимаю, со статичными props.children отрабатывает нормально, но со следующей строкой проблемы:
<Downloading isDownload={isDownload}>
  <img src={`http://openweathermap.org/img/wn/${data.current.weather[0].icon}@4x.png`} alt="Weather" />
</Downloading>


Объект data.current.weather[0].icon загружается асинхронно и на момент начала рендеринга - этого объекта не существует - сразу вылетает ошибка "Cannot read properties". Как я понимаю сначала отрабатывает строка в тильде, а только потом начинается проверка условия в компоненте Downloading

Как-то можно сделать так, чтобы сначала отрабатывало условие в Downloading компоненте, а только потом переходило к обработке тега img?
  • Вопрос задан
  • 61 просмотр
Подписаться 1 Простой Комментировать
Решения вопроса 1
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
Вроде того
export default function Downloading(props) {
  return (
    <>
      {
        props.isDownload
        ? <>{props.children()}</>
        : <div>Загрузка...</div>
      }
    </>
  )
}



<Downloading isDownload={isDownload}>
  {() => <img src={`http://openweathermap.org/img/wn/${data.current.weather[0].icon}@4x.png`} alt="Weather" />}
</Downloading>


https://reactjs.org/docs/render-props.html#using-p...

должно работать
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
09 дек. 2024, в 14:15
1000 руб./за проект
09 дек. 2024, в 13:34
1000 руб./за проект