Uncaught TypeError: Cannot read properties of undefined (reading 'map') Errors

Question

每当我尝试获取数据时都会出现此错误，我不知道为什么，它应该显示帖子但它给我一个错误和一个白页！

这是我得到的错误

这个Posts.jsx代码

import Post from "../post/Post";
import "./posts.css";

export default function Posts({ posts }) {
  return (
    <div className="posts">
      {posts.map((p) => (
        <Post post={p} />
      ))}
    </div>
  );
}

这个Home.jsx代码

import { useEffect, useState } from "react";
import Header from "../../components/header/Header";
import React from 'react'
import "./home.css"
import Posts from "../../components/posts/Posts";
import Sidebar from "../../components/sidebar/Sidebar";
import axios from "axios"


export default function Home() {
  const [posts, setPosts] = useState([]);

  useEffect(()=>{
    const fetchPosts = async ()=>{
      const res = await axios.get("/posts")
      setPosts(res.data)
    }
    fetchPosts()
  }, [])
  return (
      <>

        <Header />
        <div className="home">
        <Posts />
        <Sidebar />
    </div>
    </>
  );
}

如果有人可以提供帮助，我不知道为什么会出现此错误！

Answer 1

您没有将数据（帖子）传递到帖子组件。

<Posts posts={posts}/>

为了安全起见，您可以做什么

添加帖子的默认值
添加无效合并运算符

export default function Posts({ posts = [] }) {
  return (
    <div className="posts">
      {posts?.map((p) => (
        <Post post={p} />
      ))}
    </div>
  );
}

Answer 2

import Post from "../post/Post";
import "./posts.css";

export default function Posts({ posts }) {
  return (
    <div className="posts">
      {posts && posts.map((p) => (
        <Post post={p} />
      ))}
    </div>
  );
}

您收到此错误的原因是 post 需要一些时间才能加载，因为它 returns 是一个承诺，因此您必须解决该问题才能呈现到 post 最佳实践是定义一个变量加载并显示微调器直到它解析

Uncaught TypeError: Cannot read properties of undefined (reading 'map') Errors

Uncaught TypeError: Cannot read properties of undefined (reading 'map') Errors

reactjs

mongodb

api

axios

fetch