ReactJs中如何渲染对象列表？已拉取后端数据但列表为空怎么解决

• Props接收错误（核心问题）
  React函数组件的第一个入参是完整的props对象，你当前向DashboardProjectList传递的是project={project}属性，所以组件内需要先从props中取出对应的project字段，才能访问内部的属性。
  你现在的代码直接把props命名为project，然后调用project.projectName，实际访问的是props.projectName，而你根本没有传递这个属性，自然拿不到值，导致渲染为空。
  修复方法二选一：
  方法1：解构props获取project字段

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

方法2：从props对象中逐层取值

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

• 可选优化：补充初始状态与loading判断
  如果你的projectData初始值没有设置为空数组，首次渲染时调用map会抛出异常，建议补充判断逻辑：

return (
  <>
    {loading ? <div>加载中...</div> : 
      projectData?.map(project => {
        return <DashboardProjectList  key={project.email} project={project}/> 
      })
    }  
  </>
)

同时确保projectData的初始状态设置为空数组：

const [projectData, setProjectData] = useState([])

内容的提问来源于stack exchange，提问作者8SINS