反应使用带有 axios 的效果钩子无法读取未定义的属性

Question

这是基于本课程 https://fullstackopen.com/en/part2/getting_data_from_server 的练习 2.14。

用户可以选择一个国家，然后该国家首都的天气信息将被释放。我的代码给我错误无法读取未定义的属性"温度">

const Weather = ({ city }) => {
const [weatherDetails, setWeatherDetails] = useState([])
useEffect(() => {
axios.get('http://api.weatherstack.com/current', {
params: {
access_key: process.env.REACT_APP_WEATHER_KEY,
query: city
}
}).then(
(response) => {
setWeatherDetails(response.data)
}
)
}, [city])
console.log('weather', weatherDetails);
return (
<div>
<h3>Weather in {city} </h3>
{weatherDetails.current.temperature}
</div>
)}

基本上，这条线

{weatherDetails.current.temperature}

使我的代码崩溃。当我删除该行时，由于控制台.log，我能够看到响应，但是有两个连续的日志

weather []
weather {request: {…}, location: {…}, current: {…}}

我认为我的代码发生在这两者之间，它甚至在到达之前就尝试访问数据，但我不知道该怎么做才能解决这个问题。

另外，我不知道useEffect((的参数[city]是做什么的，所以如果有人能向我解释它的作用，那就太好了。

编辑：已解决！将 weatherDetail 的初始状态设置为 null 并执行一些条件渲染

if (weatherDetails) {
return (
<div>
<h3>Weather in {capital}</h3>
{weatherDetails.current.temperature} Celsius
</div>
)
} else {
return (
<div>
Loading Weather...
</div>
)
}

Answer 1

weatherDetails最初是一个空数组，因此没有要读取的current属性。

使用一些条件呈现。使用初始 null 状态，然后检查在更新对象时访问对象的其余部分是否真实。

const Weather = ({ city }) => {
const [weatherDetails, setWeatherDetails] = useState(null) // <-- use null initial state
useEffect(() => {
axios.get('http://api.weatherstack.com/current', {
params: {
access_key: process.env.REACT_APP_WEATHER_KEY,
query: city
}
}).then(
(response) => {
setWeatherDetails(response.data)
}
)
}, [city])
console.log('weather', weatherDetails);
return (
<div>
<h3>Weather in {capital} </h3>
{weatherDetails && weatherDetails.current.temperature} // check that weatherDetails exists before accessing properties.
</div>
)}

useEffect[city]的论点有什么作用？

这是钩子的依赖数组。钩子在每个渲染周期运行，如果依赖项数组中的任何值已更新，则会触发钩子的回调，在本例中，当city道具更新时获取天气数据的效果。

使用效果

默认情况下，效果会在每次完成渲染后运行，但您可以 选择仅在某些值发生更改时才触发它们。