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

Question

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

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

使用我的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>
  )
}

Answer 1

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

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