使用react (posts)的map方法的问题.Map不是函数)

Question

我有一个错误，而试图映射数组(下面的代码)。我收到的错误是:Uncaught (in promise) TypeError: posts。Map不是函数。我已经将它与我的一个旧项目进行了比较，它在旧项目上运行得很好。提前感谢

const MainContent = () => {

const openModal = () => {
const modal = document.querySelector(".modal");
modal.style.display = "block";
};
const [posts, setPosts] = useState([]);
const getPosts = async () => {
const response = await fetch('http://localhost:5000/api/post/');
const posts = await response.json();
setPosts(posts);
console.log(posts)
}
useEffect(() => {
getPosts();
}, []);
return (
<section className="main-content-section">
<button className="button post-btn" onClick={openModal}>
Créer un nouveau post
</button>
<ModalPost style={{ display: "none" }} />
<div className="post-container">
{posts.map((post) => {
const { id, title, content, author } = post;
return (
<div className="post-content" key={id}>
<div className="post-content__user-info">
<div className="post-content__photo-container">

</div>
<div className="post-content__name">
<h3>{author}</h3>
</div>
</div>
<div className="post-content__content">
<h3>{title}</h3>
<p>{content}</p>
</div>
<div className="post-content__like-box">
<BiHeart className="like-heart like" size={26} />
<RiDislikeLine className="dislike-heart dislike" size={26} />
</div>
</div>
);
})} 
</div>
</section>
);
};

Answer 1

在映射post数组之前添加if语句。原因是post数组没有立即获取数据，导致map函数失败。if条件将等待直到posts数组实际包含数据

{
(posts && posts.length > 0) ?
(posts.map((post) => {})
: (<p> loading... </p>)
}

Answer 2

const getPosts = async () => {
const response = await fetch('http://localhost:5000/api/post/');
const posts = await response.json();
setPosts(posts);
console.log(posts)
}

这里，response.json()的结果将是一个对象，而不是一个数组。可能，您必须查看对象内部并找到posts数组。