如何阻止多个重新渲染执行多个api调用useEffect

Question

我是react功能组件的新手，我正在尝试在页面加载中获取多个城市的天气数据，但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();
}, []);

Answer 1

您可以在不更新状态的情况下使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()
}, [])
}

Answer 2

您可以使用Promise.all，然后调用setData一次。像这样的东西：

useEffect(() => {
const fetchCity = (city) => axios.get(`${base}/${city}`);
const cities = ["Ottawa", "Toronto"];
const promises = cities.map(fetchCity);
Promise.all(promises).then((responses) => {
setData(cities.map((city, index) => ({ city, ...responses[index] })));
});
}, []);