未捕获的类型错误:data.map不是函数.反应功能组件

Question

我使用results.post从对象中提取了数组，但它仍然表示data.map不是函数

fetch('/allpost',{
headers:{
"Authorization":"Bearer "+localStorage.getItem("jwt")
}
}).then(res=>res.json())
.then(result=>{
console.log(result.posts)
setData(result.posts)
})  
},[])
return  (
<div>
{
data.map(item=>{
return(
<div className='home-container'>
<h5 className='home-name'>salil</h5>
<div className='card-image-container'>
<img className='card-image'  alt="blank" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8d2FsbHBhcGVyJTIwbmF0dXJlfGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=500&q=60" />
</div>

</div>
)
})
}


</div>
);
};
export default Home;

有人能告诉我我在这里犯了什么错误吗？

Answer 1

---

首先，当声明"useState"时，应该定义类型和赋值。就像这个const [data,setData] = useState<Array<T>>([]);。

---

第二，获取api，我们应该确认我们想要什么类型，比如.then(result=>{ setData(result?.posts || []); })。意思是如果结果？。posts的资金不足，我们可以拯救[]。

---

最后，我们应该在渲染时处理不同类型的数据

function _demo() {
return (
<div>
{data?.length === 0 && (
<div>
<span>Loading, Please Wait</span>
</div>
)}

{data?.length > 0 && data?.map((v)=> {
return (
<div>
</div>
)
)}
</div>
);
}