Javascript Stringify提供了太多的信息

我使用一个简单的fetch调用从API中提取数据。API调用提取一个对象，我使用JSON.Stringify以可读的格式提取数据，但是，我只需要它生成的数字。下面是API的摘录

{
  "confirmed": {
    "value": 24637475,
    "detail": "https://covid19.mathdro.id/api/confirmed"
  },
  "recovered": {
    "value": 16108272,
    "detail": "https://covid19.mathdro.id/api/recovered"
  },

我只是想得到确认的价值

这是我目前的代码

import React, { useState, useEffect } from "react";

const Cards = () => {
    const [hasError, setErrors] = useState(false);
    const [data, setData] = useState({});

    async function fetchData() {
        const res = await fetch("https://covid19.mathdro.id/api");
        res
            .json()
            .then(res => setData(res))
            .catch(err => setErrors(err));
    }

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

    return (
        <div>
            <span>{JSON.stringify(data.confirmed)}</span>
            <hr />
            <span>Has error: {JSON.stringify(hasError)}</span>
        </div>
    );
};
export default Cards;

import React，{useState，useffect}来自“React”；
常数卡=（）=>{
常量[hasError，setErrors]=useState（false）；
const[data，setData]=useState（{}）；
异步函数fetchData（）{
const res=等待获取（“https://covid19.mathdro.id/api");
物件
.json（）
.然后（res=>setData（res））
.catch（err=>setErrors（err））；
}
useffect（（）=>{
fetchData（）；
}, []);
返回(
{JSON.stringify（data.confirm）}

出现错误：{JSON.stringify（hasError）}
);
};
导出默认卡；

我花了一秒钟的时间对它进行了检查，然后对它进行了重构，最后才明白了这一点

import React, { useState, useEffect } from "react";

const Cards = () => {
    const [confirmed, setConfirmed] = useState("");

    useEffect(() => {
        fetch("https://covid19.mathdro.id/api")
            .then((responseData) => responseData.json())
            .then((data) => {
                setConfirmed(data.confirmed.value)
            })
    })


    return (
        <div>
            {confirmed}
        </div>
    );
};
export default Cards;

从“React”导入React，{useState，useffect}；
常数卡=（）=>{
const[confirm，setconfirm]=useState（“”）；
useffect（（）=>{
取回（“https://covid19.mathdro.id/api")
.then（（responseData）=>responseData.json（）
。然后（（数据）=>{
设置已确认（数据.已确认.值）
})
})
返回(
{确认}
);
};
导出默认卡；

---

我只是把所有的东西都用上了，结果解决了我的问题。我真的不知道为什么会这样。

没有

data.confirmed&&data.confirmed.value

提供您所需要的吗？@keikai字符串不能有属性

confirmed

@charlietfl这两个属性都提供了未定义的属性。没有意义您可以显示字符串化版本，但不能显示对象版本。创建一个复制它的演示是的，如果这是您从请求中使用的所有内容，那么即使这是错误的，它也会在每个渲染中运行。更好的检查方法是使用

数据和&{renderComponent}

任何您想要显示的数据组件