![](/img/trans.png)
[英]Appears that React is not re-rendering after state update in useeffect (Reask)
[英]useEffect not re-rendering after state change
我正在建立一个小项目,以更熟悉Hooks,现在遇到了一个问题:
该项目是一个天气应用程序,可从API中提取城市的天气数据。 下面的代码是该应用程序的简化版本。 \\
import React, { useState, useEffect } from "react"
import axios from "axios"
const App: React.FC = () => {
const [weather, setWeather] = useState<any>({})
const [city, setCity] = useState<string>("London")
const [cities, setCities] = useState<string[]>([
"London",
"New York",
"Dubai",
"Berlin",
"Los Angeles",
"Sydney",
])
useEffect(() => {
axios.get(`https://api-url/?query=${city}`)
.then(res => setWeather(res.data))
.catch ...
}, [])
return (
<Drawer>
<nav>
<ul>
{cities.map((c, i) => (
<li key={i} onClick={() => setCity(c)}>
{c}
</li>
))}
</ul>
</nav>
</Drawer>
// more JSX to display weather data for current city
)
}
预期的行为:点击li
元素设置的状态, city
新城区和重新渲染UI,加载天气数据选定的城市。
实际行为:状态已设置,但应用程序不会重新加载数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.