JSON.Stringify 提供太多信息

Question

我正在使用简单的 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;

Answer 1

我花了一秒钟的时间查看它并重构它，最终弄明白了。

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;

我只是把所有东西都放在了 useEffect 中，这最终解决了我的问题。我不太确定为什么这是解决方案。