在JSON对象数组上循环，JSON对象嵌套在其中

更新：非常感谢您，Anoop！我花了几个小时在这上面

我正在获取一些嵌套的graphql数据，我相信我的原始常量“portProjectHolder”是我所能达到的。符号

使用我的

console.log（portProjectHolder）

，我接收到一个包含2个JSON对象的数组——这2个JSON对象中每个都有一个对象，我需要从中获取属性并将它们映射到卡组件。然而，在这一点上，我不知道如何做到这一点

以下是我在控制台上得到的回应：

console.log（portProjectHolder）：

[
    {
        "portfolioProjects": {
            "projectTitle": "Sample Project 2",
            "description": "Project description...sample number 2...hope this works...",
            "image1": {
                "sourceUrl": "https://travelweird.com/wp-content/uploads/2021/05/dribble-cultivate-icon.png"
            },
            "image2": null,
            "image3": null,
            "image4": null
        }
    },
    {
        "portfolioProjects": {
            "projectTitle": "Sample Project 1",
            "description": "Project description...here's some text, let's see what ya do with it. ",
            "image1": {
                "sourceUrl": "https://travelweird.com/wp-content/uploads/2021/05/complab123-scaled.jpg"
            },
            "image2": null,
            "image3": null,
            "image4": null
        }
    }
]

我需要循环并映射其中的对象

完整代码：

import React from "react"
import { graphql } from "gatsby"

import Card from '../components/Card/Card'

export default function Home({ data }) {
  let portProjectHolder = data.wordPress.projects.nodes

  console.log(portProjectHolder)




 

  return (
      <div>
          {/* <portProjectHolder.map(portProject => { */}
                  <Card 
                    key={portProjects.projectTitle}
                   title={portProjects.projectTitle}
                   description={portProjects.description} 
                    image={portProjects.sourceUrl}
                    />
             {/* I can't for the life of me figure out how to map twice nested objects from an array...*/}
      </div>
  )
}

从“React”导入React
从“盖茨比”导入{graphql}
从“../components/Card/Card”导入卡
导出默认函数Home（{data}）{
让portProjectHolder=data.wordPress.projects.nodes
console.log（portProjectHolder）
返回(
{/*  { */}
{/*我一辈子都搞不懂如何从数组映射两次嵌套的对象…*/}
)
}

假设portfolioProjects不是数组，那么解决方案将是

<div>
      {portProjectHolder.map((portProject) => {
        const project = portProject.portfolioProjects;
        return (
          <Card
            key={project.projectTitle}
            title={project.projectTitle}
            description={project.description}
            image={project.sourceUrl}
          />
        );
      })}
    </div>

{portProjectHolder.map（（portProject）=>{
const project=portProject.portfolioProjects；
返回(
);
})}

portfolioProjects内部是什么？这几乎是完美的-我现在唯一无法提取的是SourceUrl，因为它位于图像对象中-portfolioProjects:description-更新了我的帖子以更清晰地显示返回响应VM-现在一切都好了。只需要添加project.image1.SourceUrl