Reactjs 使用API在React表中创建数据

我是React.js的新手，我想在这里使用这个api：创建一个包含来自美国各州的最新COVID-19数据的表。问题是，当我呈现应用程序时，我似乎无法将数据上传到表中。任何帮助都将不胜感激，谢谢

import React, { useMemo, useState, useEffect } from "react";
import axios from "axios";
import Table from "./Table";
import "./App.css";

function App() {

  const [loadingData, setLoadingData] = useState(true);
  const columns = useMemo(() => [
    {
      Header: "State",
      accessor: "show.state",
    },
    {
      Header: "Positive Cases",
      accessor: "show.positive",
    },
    {
      Header: "Recovered Cases",
      accessor: "show.recovered",


    },
    {
      Header: "Deaths",
      accessor: "show.death",
    },
    {
      Header: "Total Tested",
      accessor: "show.total",
    }

  ]);

  const [data, setData] = useState([]);

  useEffect(() => {
    async function getData() {
      await axios
        (.get("https://covidtracking.com/api/v1/states/current.json")
        .then((response)) => {

          console.log(response.data);
          setData(response.data);
          setLoadingData(false);
        });
    }
    if (loadingData) {
      getData();
    }
  }, []);

  return (
    <div className="App">
      {loadingData ? (
      ) : (
        <Table columns={columns} data={data} />
      )}
    </div>
  );
}

export default App;

import React，{usemo，useState，useffect}来自“React”；
从“axios”导入axios；
从“/Table”导入表；
导入“/App.css”；
函数App（）{
const[loadingData，setLoadingData]=useState（true）；
const columns=useMemo（（）=>[
{
标题：“国家”，
访问者：“show.state”，
},
{
标题：“正面案例”，
访问者：“show.positive”，
},
{
标题：“已恢复的案例”，
访问者：“show.recovered”，
},
{
标题：“死亡”，
访问者：“显示。死亡”，
},
{
标题：“总测试”，
访问者：“show.total”，
}
]);
const[data，setData]=useState（[]）；
useffect（（）=>{
异步函数getData（）{
等待axios
（.get（）https://covidtracking.com/api/v1/states/current.json")
.然后（（响应））=>{
console.log（response.data）；
setData（response.data）；
设置加载数据（假）；
});
}
if（加载数据）{
getData（）；
}
}, []);
返回(
{加载数据(
) : (
)}
);
}
导出默认应用程序；

回答！！！非常感谢你

import React，{usemo，useState，useffect}来自“React”；
import React, { useMemo, useState, useEffect } from "react";
import axios from "axios";
import Table from "./Table";
import "./App.css";

function App() {
  // here you set a state to tell the component it need to wait
  //  until the result is fetched from the api
  const [loadingData, setLoadingData] = useState(true);
  const columns = useMemo(() => [
    {
      Header: "State",
      accessor: "state",
    },
    {
      Header: "Positive Cases",
      accessor: "positive",
    },
    {
      Header: "Recovered Cases",
      accessor: "recovered",
    },
  ]);

  const [data, setData] = useState([]);

  useEffect(() => {
    async function getData() {
      await axios
        .get("https://covidtracking.com/api/v1/states/current.json")
        .then((response) => {
          // check if the data is populated
          console.log(response.data);
          setData(response.data);
          // you tell it that you had the result
          setLoadingData(false);
        });
    }
    if (loadingData) {
      // if the result is not ready so you make the axios call
      getData();
    }
  }, []);

  return (
    <div className="App">
      {/* here you check if the state is loading otherwise if you wioll not call that you will get a blank page because the data is an empty array at the moment of mounting */}
      {loadingData ? (
        <p>Loading Please wait...</p>
      ) : (
        <Table columns={columns} data={data} />
      )}
    </div>
  );
}

export default App;

从“axios”导入axios；
从“/Table”导入表；
导入“/App.css”；
函数App（）{
//这里您设置了一个状态，告诉组件它需要等待
//直到从api获取结果为止
const[loadingData，setLoadingData]=useState（true）；
const columns=useMemo（（）=>[
{
标题：“国家”，
访问者：“国家”，
},
{
标题：“正面案例”，
访问者：“肯定”，
},
{
标题：“已恢复的案例”，
访问者：“已恢复”，
},
]);
const[data，setData]=useState（[]）；
useffect（（）=>{
异步函数getData（）{
等待axios
.get（“https://covidtracking.com/api/v1/states/current.json")
。然后（（响应）=>{
//检查数据是否已填充
console.log（response.data）；
setData（response.data）；
//你告诉它你得到了结果
设置加载数据（假）；
});
}
if（加载数据）{
//如果结果未准备好，则进行axios调用
getData（）；
}
}, []);
返回(
{/*这里您检查状态是否正在加载，否则如果您不调用，您将得到一个空白页，因为在装载时数据是一个空数组*/}
{加载数据(
正在加载，请稍候

) : (
)}
);
}
导出默认应用程序；

从“React”导入React，{usemo，useState，useffect}；
从“axios”导入axios；
从“/Table”导入表；
导入“/App.css”；
函数App（）{
//这里您设置了一个状态，告诉组件它需要等待
//直到从api获取结果为止
const[loadingData，setLoadingData]=useState（true）；
const columns=useMemo（（）=>[
{
标题：“国家”，
访问者：“国家”，
},
{
标题：“正面案例”，
访问者：“肯定”，
},
{
标题：“已恢复的案例”，
访问者：“已恢复”，
},
]);
const[data，setData]=useState（[]）；
useffect（（）=>{
异步函数getData（）{
等待axios
.get（“https://covidtracking.com/api/v1/states/current.json")
。然后（（响应）=>{
//检查数据是否已填充
console.log（response.data）；
setData（response.data）；
//你告诉它你得到了结果
设置加载数据（假）；
});
}
if（加载数据）{
//如果结果未准备好，则进行axios调用
getData（）；
}
}, []);
返回(
{/*这里您检查状态是否正在加载，否则如果您不调用，您将得到一个空白页，因为在装载时数据是一个空数组*/}
{加载数据(
正在加载，请稍候

) : (
)}
);
}
导出默认应用程序；

---

我刚试过，但同样的事情发生了-只是一个空白页，除了标题之外没有任何数据，粘贴您的表组件，我将更改它，并用一个工作组件更新我的响应。现在正在工作，并对问题进行一个小的解释。表文件是否需要更改？因为我得到的结果和以前完全一样。一秒钟后我看到了我刚刚尝试过的结果，但同样的事情发生了-只是一个空白页，除了标题之外没有任何数据，粘贴你的表组件，我将更改它，并用一个正在工作的组件更新我的响应。现在正在工作，并对问题进行一个小的解释。是否需要更改表文件？因为我得到了和以前完全一样的结果。一秒钟后我就看到了