javascript - 如何阻止多个重新渲染执行多个 api 调用 useEffect?
问题描述
我是反应功能组件的新手,我正在尝试在页面加载时获取多个城市的天气数据,但 useEffect 现在正在重新渲染每个调用。我该如何编写这样 useEffect 不会导致重新渲染?
function App() {
const [data, setData] = useState([]);
const [activeWeather, setActiveWeather] = useState([]);
useEffect(() => {
const key = process.env.REACT_APP_API_KEY;
const fetchData = async (city) => {
const res = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}`);
setData((data) => [
...data,
{ description: res.data.weather[0].description, icon: res.data.weather[0].icon, temp: res.data.main.temp, city: res.data.name, country: res.data.sys.country, id: res.data.id },
]);
};
const fetchCities = () => {
const cities = [fetchData("Ottawa"), fetchData("Toronto"), fetchData("Vancouver"), fetchData("California"), fetchData("London")];
Promise.all(cities).catch((err) => {
console.log(err);
});
};
fetchCities();
}, []);
解决方案
您可以使该fetchData
函数在不更新状态的情况下返回您需要的数据,然后您可以获取 x 数量的城市,并且仅当所有请求完成更新状态时。
请注意,如果Promise.all中的请求之一失败,它将进入catch
块而不返回任何数据,基本上全有或全无
const key = process.env.REACT_APP_API_KEY
const fetchCity = async city => {
const { data } = await axios.get(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}`,
)
return {
description: data.weather[0].description,
icon: data.weather[0].icon,
temp: data.main.temp,
city: data.name,
country: data.sys.country,
id: data.id,
}
}
function App() {
const [cities, setCities] = useState([])
const [activeWeather, setActiveWeather] = useState([])
useEffect(() => {
const fetchCities = async () => {
const citiesData = await Promise.all(
['Ottawa', 'Toronto', 'Vancouver'].map(fetchCity),
)
setCities(prevState => prevState.concat(citiesData))
}
fetchCities()
}, [])
}
推荐阅读
- matlab - 如何在双循环中获得几个函数调用的总和
- spring - 跨微服务的安全性
- android - 我正在尝试在显示图像和动画等的系统导航栏上扩展我的自定义视图
- asp.net - asp-for 标签助手功能
- excel - 宏是否有可能损坏文件?
- minizinc - 为什么picat说模型不能满足?
- php - Windows 10 XAMPP 上的 Magento 2.3.2 - 扭曲的后端
- android - 将项目迁移到 Androidx 后,任务 ':app:checkDebugDuplicateClasses' 的执行失败。> 工人提出了 1 个例外:
- vue.js - Nuxt 不会在路线更改时更新
- python - 如何使用 Keras 确定类?