小编Bra*_*don的帖子

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

我正在尝试制作一个旋转木马来显示我完成的项目的一些图像。我知道周围有很多 react carousel 组件，那么有人知道一个可以与 gatsby-image 配合使用的组件吗？