将 map 方法与 react 一起使用时出现问题（posts.map 不是函数）答案

【问题标题】：Problem using map method with react (posts.map is not a function)将 map 方法与 react 一起使用时出现问题（posts.map 不是函数）
【发布时间】：2021-08-30 11:19:00
【问题描述】：

我在尝试映射数组时出错（代码如下）。我收到的错误是： Uncaught (in promise) TypeError: posts.map is not a function。我将它与我的一个旧项目进行了比较，它在旧项目上运行良好。提前致谢

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>
  );
};

【问题讨论】：

尝试在你的 useEffect 钩子中定义你的 getPosts 函数。另外，在设置帖子之前记录帖子的价值。
“posts”是一个数组吗？我们看不到响应。
重要的是要注意，当您执行 console.log(posts) 时，您指的是内部帖子变量（const）而不是状态变量
在映射post数组之前添加if语句。原因是posts数组没有立即获取数据导致map函数失败。 if 条件将等到帖子数组实际包含数据 ` { (posts && posts.length > 0) ？ posts.map((post) => {} : (
loading...
) } `

标签： javascript reactjs dictionary

【解决方案1】：

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

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

【讨论】：

这个答案很可能会起作用，但实际上并不能解释这个问题。在空数组上调用 .map() 完全没问题。
可以在空数组上调用.map()。但是这个动作会影响这个页面的用户体验。用户将无法弄清楚为什么页面上没有任何内容。

【解决方案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() 的结果将是一个对象，而不是一个数组。可能，您必须查看对象内部并找到帖子数组。

【讨论】：