gpt4 book ai didi

reactjs - useEffect 状态更改后不重新渲染

转载 作者:行者123 更新时间:2023-12-02 03:12:28 25 4
gpt4 key购买 nike

我正在构建一个小项目来更加熟悉 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,加载所选城市的天气数据。

实际行为:状态已设置,但应用程序不会重新加载数据。

最佳答案

您需要指定city作为依赖项,告诉何时重新执行效果。

参见Conditionally firing an effect有关 [] 参数的更多详细信息。

useEffect(() => {
axios.get(`https://api-url/?query=${city}`)
.then(res => setWeather(res.data))
.catch ...
}, [city])

另请参阅ESLint plugin有关 Hooks 和详尽 Deps 的规则。

关于reactjs - useEffect 状态更改后不重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57232846/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com