Ошибка типа: не удается прочитать свойство 'влажность' неопределенного значения

#javascript #reactjs

Вопрос:

Я пытаюсь выполнить вызов API, затем увлажнить страницу данными, которые я получаю, однако я не могу понять, как условно отобразить то, что находится на странице. Как только страница загружается, я получаю сообщение об ошибке «TypeError: не удается прочитать свойство ‘humidity’ неопределенного типа». Я хочу иметь возможность отображать одно и то же представление с пустыми пробелами до тех пор, пока пользователь не начнет взаимодействовать со страницей.

Вот мой код

 const handleInputChange = (e) => {
  setSearch(e.target.value)
};

const handleCall = () => {
  API.getWeather(search)
    .then(res => {
      setWeather(res.data)
    })
};

return (
<h2> Feels Like: {weather.main.temp}</h2>

<ul>
<li>Humidity: {weather.main.humidity}</li>
<li>Max Temp: {weather.main.temp_max}</li>
</ul>
)

1. Для чего задано начальное значение состояния weather ? Можете ли вы обновить, чтобы включить полный код компонента? Вероятно, вам потребуется использовать условный рендеринг или какую-либо другую форму защиты от ошибок «доступ к неопределенному», таких как проверки доступа или необязательное объединение в цепочку.

2. Извините, я должен был это добавить. Начальное состояние для weather — это просто пустой массив. Я не смог разобраться с условным отображением, поэтому я попытался использовать useEffect (), чтобы предоставить ему данные из первой загрузки, но это не сработало

Ответ №1:

Использование защитного шаблона

 return (
  <h2> Feels Like: {weather amp;amp; weather.main amp;amp; weather.main.temp}</h2>

  <ul>
    <li>Humidity: {weather amp;amp; weather.main amp;amp; weather.main.humidity}</li>
    <li>Max Temp: {weather amp;amp; weather.main amp;amp; weather.main.temp_max}</li>
  </ul>
)

Использование необязательной цепочки

 return (
  <h2> Feels Like: {weather?.main?.temp}</h2>

  <ul>
    <li>Humidity: {weather?.main?.humidity}</li>
    <li>Max Temp: {weather?.main?.temp_max}</li>
  </ul>
)

Ответ №2:

Вы можете сделать что-то вроде

 weather amp;amp; weather.main amp;amp; weather.main.temp || "Loading..."

Таким образом, пока у вас в системе не появятся данные, будет отображаться слово «Загрузка …»