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

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

我尝试过setArticles（{articles:data}），setArticles（data）…没有任何效果

log（数据）返回 0:{u id:“5de17f5639103b3f430571c4”，标题：“测试”，链接：“www.test.com”，标题：“测试标题”，摘要：“测试摘要”} 长度：1 proto：数组（0）

函数Home（）{
const[articles，setArticles]=useState（[]）；
useffect（（）=>{
设initialArticles=[]；
axios.get（“/api/articles”）
。然后（响应=>{
让data=response.data；
initialArticles=data.map（article=>{
退货
});
返回首字母冠词
}).然后（数据=>{
console.log（数据）
固定粒子({
headline:data.headline，URL:data.URL，summary:data.summary，comment:data.comment
})
console.log（文章）
})
}, [])
返回(
新闻刮板
自动抓取最新的标题。
{文章长度(

{articles.map（el=>(


))}

) : (
没有要显示的结果
)}
)
};
导出默认主页；

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

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

但稍后将其设置为对象：

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

然后测试它，就好像它是您返回的数组一样：

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

---

看起来您正在尝试设置项目状态需要数组的对象。。尝试

setArticles（data）

而不是

useffect（（）=>{let cancelled=false；axios.get（'/api/articles'）。然后（response=>{if（！cancelled）setArticles（response.data）；}）；返回（）=>{cancelled=true；}；}；}，[]）将防止在API调用完成之前卸载组件时出现“内存泄漏”警告。
{articles.length ? (
              <ul>
                {articles.map(el => (

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