如何在 object React JS 中访问 object

Question

我的 Object

const globalData = {
    "confirmed": {
        "value": 106643519,
        "detail": "https://covid19.mathdro.id/api/confirmed"
    },
    "recovered": {
        "value": 59549395,
        "detail": "https://covid19.mathdro.id/api/recovered"
    },
    "deaths": {
        "value": 2330839,
        "detail": "https://covid19.mathdro.id/api/deaths"
    },
    "dailySummary": "https://covid19.mathdro.id/api/daily",
    "dailyTimeSeries": {
        "pattern": "https://covid19.mathdro.id/api/daily/[dateString]",
        "example": "https://covid19.mathdro.id/api/daily/2-14-2020"
    },
    "image": "https://covid19.mathdro.id/api/og",
    "source": "https://github.com/mathdroid/covid19",
    "countries": "https://covid19.mathdro.id/api/countries",
    "countryDetail": {
        "pattern": "https://covid19.mathdro.id/api/countries/[country]",
        "example": "https://covid19.mathdro.id/api/countries/USA"
    },
    "lastUpdate": "2021-02-09T17:23:36.000Z"
}

我想从“确认”键访问“值”。 我怎样才能做到这一点...？ 我试过这样做

function Cards() {

   const [globalData, setGlobalData] = useState({});

   useEffect(() => {
    async function getData(){
        const response = await fetch("https://covid19.mathdro.id/api")
        const data = await response.json()
        setGlobalData(data)
    }
    getData()
   }, [])

console.log(globalData.confirmed.value)

但它给了我这个错误

    TypeError: Cannot read property 'value' of undefined
Cards
D:/Bootcamp Projects/Covid-19 Tracker App/src/Components/Cards/Cards.js:18
  15 |        getData()
  16 |    }, [])
  17 | 
> 18 |    console.log(globalData.confirmed.value)
     | ^  19 | 
  20 |  return (
  21 |    <div className="Cards">

我尝试了很多方法，但没有任何解决方案......期待一个解决方案......

Answer 1

原来设置为 null 等待数据存在

编辑：为了更好地解释，全局数据 state 最初是 null。 因为这是一个假值，我们可以使用 && 运算符等待数据存在并成为一个真值

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

export default function App() {
  const [globalData, setGlobalData] = useState(null);

  useEffect(() => {
    async function getData() {
      const response = await fetch("https://covid19.mathdro.id/api");
      const data = await response.json();
      setGlobalData(data);
    }
    getData();
  }, []);

  console.log(globalData && globalData.confirmed.value);
  return <div className="App"></div>;
}