如何从 api 解构数组对象并放入状态？

Question

所以基本上我正在学习如何调用 api，并且我在搞乱开放的天气 api，试图显示几个不同城市的名称和温度。问题是响应是数组的对象，并试图将所有城市的名称放入状态，以便我可以显示它们。让所有名称进入状态的最佳方法是什么？

import "./App.css";
import React, { useEffect, useState } from "react";
import axios from "axios";

function App() {
    const [cityName, setCityName] = useState("");
    const [temp, setTemp] = useState("");
    const [description, setDescription] = useState("");

    const fetchData = () => {
        //api variables (normily stored somewhere safer)
        const lat = "35.320696399999996";
        const lon = "-75.8232391";
        const key = "115475ac7a8dda2a7e7ec0b27b93ce35";
        const cnt = "5";
        const url = `https://api.openweathermap.org/data/2.5/find?lat=${lat}&lon=${lon}&cnt=${cnt}&appid=${key}`;

        axios
            .get(url)
            .then((res) => {
                
                console.log(res.data.list);
            })
            .catch((err) => {
                console.log(err);
            });
    };

    useEffect(() => {
        fetchData();
    }, []);

    return <div className="App"></div>;
}
export default App;

Answer 1

您可以将响应列表映射到具有所需属性的新数组。更新您的组件，使其拥有一个“数据”状态数组来保存映射的响应值。

const [data, setData] = useState([]);

const fetchData = () => {
  
  ...

  axios
    .get(url)
    .then((res) => {
      console.log(res.data.list);

      // destructure name, main.temp, and weather
      const data = res.data.list.map(({ name, main: { temp }, weather }) => {
        // weather is an array of length 1, but still provide fallback
        const { description } = weather[0] ?? {};

        return {
          description,
          name,
          temp,
        };
      });

      setData(data);
    })
    .catch((err) => {
      console.log(err);
    });
};

useEffect(() => {
    fetchData();
}, []);