Reactjs 正确的密钥用法

我想从接收到的数据中提取密钥，如图所示。（检查示例：正确的密钥用法）。 我的代码正在运行，但当我试图模仿正确的使用方法来分别获取组件的键时，从调用中接收到的数据是未定义的，我不理解

这是工作代码：

import React from 'react'
import ProjectSummary from './ProjectSummary'

const ProjectList = ({projects}) => {
  return (
    <div className="project-list section">
      { projects && projects.map(project => {
        return (
          <ProjectSummary project={project} key={project.id} />
        )
      })}  
    </div>
  )
}

export default ProjectList

编辑：查找沙盒项目

修复了应用程序：

您忘记在

通知

和

项目摘要

组件中导入

react

在

ProjectListComponent

中还添加了导致错误的条件呈现：

函数ProjectListComponent（{projects}）{
log（JSON.stringify（projects））；
返回(
{/**谁在将项目传递给ProjectList？仪表板组件，在问题editinside
仪表板中查找代码您是否检查了项目本身是否定义了？否，但如果您检查了问题中的工作代码，即在ProjectList组件中检查的代码，因此我遵循了该方法，可以吗请尝试
console.log（this.props.projects）
或
console.log（projects）
并查看是否在
仪表板中定义了项目
？感谢您的回答，我收到了以下错误：错误：对象作为React子对象无效（找到：具有键{projectItems}的对象）。如果要呈现子对象集合，请改用数组。将其发布在codesandbox或stackblitz上，以便于调试。此外，传递的数据的形状有点模糊。@rustyBucketBay，如果您得到错误
对象是有效的子对象
，则您正在呈现整个对象。@rustyBucketBay尝试访问渲染内部的关键点calls@rustyBucketBay，我在回答中的示例中添加了一个可用的应用程序，请务必签出。您的firebase配置详细信息一直处于打开状态！请小心，如果可能，请将其删除。可能会有人误用它。
import React from 'react'
import ProjectSummary from './projectSummary'

const ProjectList = ({projects}) => { //projects undefined here!
  return (
    <div className="project-list section">
      <ProjectListComponent projects={projects} />
    </div>
  )
}

function ProjectListComponent(projects) {
  let projectItems;
  if (projects) {
    projectItems = projects.map(project => {
      <ListItem key={project.id} value={project} />
    });
  }
  return(
    { projectItems }
  );
}

function ListItem(key, project) {
  return (
    <ProjectSummary project={project} key={key} />
  )
}

export default ProjectList

class Dashboard extends Component {
  render() {
    // console.log(this.props)
    const { projects } = this.props;

    return (
      <div className= "dashboar container">
        <div className="row">
          <div className="col s12 m6">
            <ProjectList projects={projects}/>
          </div>
          <div className="div col s12 m5 offset-m1">
            <Notifications/>
          </div>
        </div>
      </div>
    )
  }
}