使用 React 和 Hooks 设置从 API 调用到服务器的状态

Question

我正在尝试将数据从我的服务器渲染到我的 React 前端。axios 调用工作并返回我的数据库中的测试数据，但我似乎无法使用这些数据设置状态，然后将其呈现到页面上。我花了几个小时实施不同的方法并阅读每个相关问题，但似乎没有任何效果。我错过了什么？唯一会呈现的是"没有要显示的结果"和 console.logging 文章生成一个空数组(设置其状态后(。

我试过setArticles({articles： data}(， setArticles(data(...什么都没用。

控制台.log(数据(返回 0： {_id： "5de17f5639103b3f430571c4"， 标题： "测试"， 链接： "www.test.com"， 标题： "测试 标题"， 摘要： "测试摘要"} 长度： 1原型： 数组(0(

function Home(){
const [articles, setArticles] = useState([]);
useEffect(() => {
let initialArticles = [];
axios.get("/api/articles")
.then(response => {
let data = response.data; 
initialArticles = data.map(article => {
return article
});
return initialArticles
}).then(data => { 
console.log(data) 
setArticles({
headline: data.headline, URL: data.URL, summary: data.summary, comment: data.comment
})
console.log(articles)
})
}, [])
return (
<div id="homeBackground">
<Container id="homeContainer">
<h1>News Scraper</h1>
<h4>Automatically grab the latest headlines.</h4>           
{articles.length ? (
<ul>
{articles.map(el => (
<li key={el._id}>
<a href={el.URL}>
<strong>
{el.headline}
</strong>
</a>
</li>
))}
</ul>
) : (
<h3>No Results to Display</h3>
)}
</Container>
</div>
)
};
export default Home;

Answer 1

首先将状态设置为空数组：

const [articles, setArticles] = useState([]);

但稍后您将它设置为对象：

setArticles({
headline: data.headline, URL: data.URL, summary: data.summary, comment: data.comment
})

然后在返回中将其作为数组进行测试：

{articles.length ? (
<ul>
{articles.map(el => (

我认为您可以简单地将useEffect中的数据设置为：

useEffect(() => {
axios.get("/api/articles")
.then(response => {
setArticles(response.data); 
});
}, [])