Reactjs的map函数导致整个页面变成空白

Question

我把我的后端和前端放在一起，在我用Effect Hook获取我的数据后，我映射了数据，并在h2标记中返回了文章标题，map函数导致整个页面变为空白，但是当我注释出该部分时，页面似乎工作得很好。

import './App.css';
import {useState, useEffect} from "react";

function App() {
const [articles,setArticles] = useState([])
useEffect(()=>{
fetch('http://127.0.0.1:8000/api/articles',{
'method':'GET',
headers: {
'content-Type':'application/json',
'Authorization':'Token a9714c85387c802207740a7bd8882f4a748733be',
}
})
.then(response => response.json())
.then(response => setArticles())
.catch(error => console.log(error))
},[])
return (
<div className="App">
<h3> Django & Reactjs Blog App</h3>
{articles.map(article =>{
return <h2> {article.title} </h2>
})}
</div>
);
}
export default App;

我希望页面能像正常一样加载，但是会有一个假标题的文章。

Answer 1

您需要传递您得到的响应并使用set函数将其保存到您的状态。

.then(response => setArticles(response.data.articles))