javascript - 如何通过 API 中的嵌套值进行映射

Question

我正在使用 React Hooks 从这个 API 访问 Covid-19 数据。至此，我已经成功访问​​：country and province. 但是当我来到确诊和死亡病例时，stats我无法访问这些数据

• 问题似乎出在 API 数据函数上，我收到一个错误，不允许我在 => 处使用点stats.confirmed

这是我当前的 API 数据代码：

import React from "react";
import { useFetch } from "./Hooks";

function Data() {
   const [data, loading] = useFetch("https://corona.lmao.ninja/v2/jhucsse");

   return (
      <>
         {loading ? (
         "Loading..."
         ) : (
         <table>
            <tbody>
               <tr>
                  <th>Province</th>
                  <th>Country</th>
                  <th>Confirmed Cases</th>
                  <th>Recovered</th>
               </tr>

               {data.map(({ country, province, stats.confirmed }) => (
               <tr>
                  <td>{province ? province : 'No province'}</td>
                  <td>{country}</td>
                  <td>{stats.confirmed}</td>
               </tr>
               ))}
            </tbody>
         </table>
         )}
      </>
   );
}

export default Data;

这是 Hook 的代码：

import { useState, useEffect } from "react";

function useFetch(url) {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);

   async function fetchUrl() {
     const response = await fetch(url);
     const json = await response.json();

     setData(json);
     setLoading(false);
   }

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

   return [data, loading];
}

export { useFetch };

Answer 1

您需要从对象中删除 stats.confirmed 并获取统计信息。现在您将能够从

统计对象：

  "stats":{
      "confirmed":3,
      "deaths":0,
      "recovered":3
    },

代码：

 {data.map(({ country, province, stats }) => (
               <tr>
                  <td>{province ? province : 'No province'}</td>
                  <td>{country}</td>
                  <td>{stats.confirmed}</td>
               </tr>
               ))}