reactjs - 在 react.js 上使用 Axios 从 API 中提取数据。我究竟做错了什么？

Question

我正在尝试从下面的数组中提取数据。我的代码在我的 console.log 下方。我究竟做错了什么？当我尝试提取数据时，什么都没有呈现。

(356) […]
​
[0…99]
0: Object { TournamentID: 405, Name: "The Presidents Cup", StartDate: "2021-09-30T00:00:00", … }​​
1: Object { TournamentID: 453, Name: "Tour Championship", StartDate: "2021-09-02T00:00:00", … }​​
2: Object { TournamentID: 452, Name: "BMW Championship", StartDate: "2021-08-26T00:00:00", … }
​​

下面是我用来提取数据的代码。

function App() {
  const [data, setData] = useState([])

  useEffect(()=>{
    axios
    .get('https://api.sportsdata.io/golf/v2/json/Tournaments?key=72259e02756442d38c6b837dd8625e4f')
    .then((res)=> {
      
     console.log(res.data)
     setData(res.data)
})

  },[])

  return (
    
    <div className="App">
        
        <div className='container'>
        
        <h1>{data.Name}</h1>
        

      </div>
      
    </div>
    
  );
}

export default App;

标签： reactjsaxios

Answer 1

您需要使用以下内容映射数据数组：

return (
  <div className="App">
    <div className='container'>
      {data.map(item => <h1 key={item.TournamentID}>{item.Name}</h1>)}
    </div>
  </div>
);

您还需要 key 属性。