ReactJS 从 api json 文件中获取数据

Question

我正在尝试从此 api 访问数据。当它像以下格式时，我知道如何访问它的数据

{
  "confirmed": {
      "value": 6429453,
      "detail": "https://covid19.mathdro.id/api/confirmed"
},
  "recovered": {
      "value": 2804649,
      "detail": "https://covid19.mathdro.id/api/recovered"
},
  "deaths": {
      "value": 385873,
      "detail": "https://covid19.mathdro.id/api/deaths"
},

我会这样做

try {
    const {/* data: {confirmed, recovered, deaths, lastUpdate}} = await axios.get(url); */

      data: { confirmed, recovered, deaths, lastUpdate },
    } = await axios.get(changeableUrl); 

    const modifiedData = { 
        confirmed, 
        recovered, 
        deaths, 
        lastUpdate
     };

    return modifiedData;
    /* return response; */
  } catch (error) {
    console.log(error);
  }
};

但是当我试图访问统计数据所在的数据时，它不起作用，它是 嵌套 json 对象，

 [
    {
       "country": "US",
       "province": "Louisiana",
       "county": "Acadia",
       "updatedAt": "2020-06-03 02:33:13",
       **"stats": {
          "confirmed": 428,
          "deaths": 24,
          "recovered": 0
        },**
       "coordinates": {
          "latitude": "30.2950649",
          "longitude": "-92.41419698"
       }
   }
]

我尝试以下方法：

if (county) {   
        changeableUrl = `${url}/jhucsse/counties/${county}`;
        try{
            const {data:{updatedAt, stats:{confirmed, deaths, recovered}}} = await axios.get(changeableUrl);
            const modifiedData = {
                cases: confirmed,
                deaths,
                recovered,
                updated: updatedAt
            }
            console.log(modifiedData);
            return modifiedData;
        }catch(error){
            console.log(error);
        }
    }

有没有更好的方法来访问 api 数据？提前谢谢！

编辑： CodeSandbox 链接在这里：https://codesandbox.io/s/pickers-l6mip?file=/src/component/statepicker.jsx

更新工作代码：

 if (county) {
    try {
      const { data } = await axios.get(`${url}/jhucsse/counties/${county}`);
      const modifiedData = {
        cases: data[0].stats.confirmed,
        recovered: data[0].stats.recovered,
        deaths: data[0].stats.deaths
      };

Answer 1

您必须注意，您正在从 API 接收一个数组，因此您需要从第一个对象获取 stats 值。

您应该只需要访问返回的数据数组中的第一个对象，因为您正在专门查询 1 个县或 1 个州，因此预期输出不应包含多个对象

此外，当您进行查询时，您必须将州或县变量作为对象而不是直接值传递，否则您将无法区分要查询的 API

更新后的 fetchUSData 方法如下所示

export const fetchUSData = async ({ county, state } = {}) => {
  /* let changeableUrl = `${url}/countries/USA`; */
  if (county) {
    try {
      const { data } = await axios.get(`${url}/jhucsse/counties/${county}`);
      const modifiedData = {
        stats: data[0].stats
      };

      /* return stats.map((confirmed) => confirmed.value); */
      return modifiedData;
    } catch (error) {
      console.log(error);
    }
  } else if (state) {
    try {
      const { data } = await axios.get(`${url}/jhucsse/counties/${county}`);

      const modifiedData = {
        stats: data[0].stats
        /* updated: updatedAt, */
      };
      return modifiedData;
    } catch (error) {
      console.log(error);
    }
  }
}

还要注意你声明查询，你需要更新你的API端点，它似乎指向县

Working Demo

Answer 2

所以在查看your codepen 之后，您的函数fetchCounty 应该如下所示（在api/index.js 中）：

export const fetchCounty = async () => {
  try {
    const { data } = await axios.get(`${url}/jhucsse/counties`);
    const modifiedData = data.map(fetchedCounty => ({
      county: fetchedCounty.county,
      province: fetchedCounty.province,
      stats: fetchedCounty.stats,
    }));

    return modifiedData;
  } catch (error) {
    console.log(error);
  }
};

因此，您还将传递每个县的统计数据。