如何在 ReactJs 中显示对象列表

Question

我正在尝试在反应中显示一个列表。我已成功从后端获取数据。这是我的 console.log 回复

0: {_id: '6170400972c5ba31e46c2d69', projectId: '60019df7167f2238c07c4e25', projectName: 'Sarafina', projectLocation: 'Nigeria', email: 'sara@gmail.com', …}
1: {_id: '617048567b7747364c06bb40', projectId: '60019df7167f2238c07c4e25', projectName: 'Sarafina2', projectLocation: 'South Africa', email: 'sara2@gmail.com', …}
length: 2
[[Prototype]]: Array(0)

但是当我尝试显示列表时，它是空的。

这是我从后端获取数据的地方

useEffect(()=>{
  const fetchProject= async()=>{
     setLoading(true)
  const res= await axios.get(`/api/v1/project/${auth.user.id}`,
  {
   
  });

  if(res.data){
    setProjectData(res.data);      
    setLoading(false)                
   console.log(res.data)
  }else{
    setOpen(true)
  }
   
  }
fetchProject();                 
},[])  
  
............. // other lines of code

 return (
      <>
       {projectData.map(project => {
        return <DashboardProjectList  key={project.email} project={project}/> 
      })}  
     </>
)

这里是 DashboardProjectList 组件

export default function DashboardProjectList(project) {   
  

return(
<>   
{project.projectName}

</>
)
}

列表不显示。如果有人能帮助我找出问题所在，我将不胜感激。

Answer 1

请将console.log(project) 添加到 DashboardProjectList 组件。

export default function DashboardProjectList({ project }) {   
    return(
       <>   
         {project.projectName}
       </>
    )
}

或

export default function DashboardProjectList(props) {   
    return(
       <>   
         {props.project.projectName}
       </>
    )
}