Question

我正在尝试进行API调用，然后在收到的数据中填充页面，但是我不知道如何有条件地呈现页面上的内容。页面加载后，我立即收到错误消息“ TypeError：无法读取未定义的属性'湿度'”。我希望能够在用户与页面进行交互之前显示带有空白的相同视图。

这是我的代码

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>
)

Answer 1

使用保护图案

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

  <ul>
    <li>Humidity: {weather && weather.main && weather.main.humidity}</li>
    <li>Max Temp: {weather && weather.main && 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>
)

Answer 2

您可以做类似的事情

weather && weather.main && weather.main.temp || "Loading..."

这样，在系统中拥有数据之前，将出现“正在加载...”一词

TypeError：无法读取未定义的属性“湿度”

2 个答案: