将 GraphQL 查询传递给 React 中的嵌套映射

Question

解释

我正在将来自下面这个 GraphQL 查询的数据传递给一个嵌套的 map 函数，但我不断收到 node.map is not a function，即使它在一个数组中。我看不出我在这里做错了什么，所以任何指导都将不胜感激。 ;)

代码

查询

query MyQuery {
  allContentfulAwards {
    edges {
      node {
        year
        championships {
          contest
          title {
            key
            value
          }
        }
      }
    }
  }
}

数据

{
  "data": {
    "allContentfulAwards": {
      "edges": [
        {
          "node": {
            "year": "2021",
            "championships": [
              {
                "contestName": "Contest1",
                "titles": [
                  {
                    "key": "TitleA"
                  },
                  {
                    "key": "TitleB"
                  }
                ]
              },
              {
                "contestName": "Contest2",
                "titles": [
                  {
                    "key": "TitleA"
                  }
                ]
              }
            ]
          }
        },
        {
          "node": {
            "year": "2020",
            "championships": [
              {
                "contestName": "Contest1",
                "titles": [
                  {
                    "key": "TitleA"
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  }
}

嵌套地图

{
  data.allContentfulAwards.edges.map(({node}) => (
    <div>
      {node.ano}
      {node.map(({championships}) => (
        <AwardsCollapse name={championships.contestName}>
          {championships.map(({titles}) => (
            <p>{titles.key}</p>
          ))}
        </AwardsCollapse>
      ))}
    </div>
  ));
}

提前致谢，
路易斯。

Answer 1

Luiz，JavaScript 中的map 函数与arrays 相关联。您正在尝试在node 上使用map 函数，这是一个object。

使用下面的代码获得您想要的结果。

{
  data.allContentfulAwards.edges.map(({node}) => (
    <div>
      {node.year}
      {node.championships.map(({contestName, titles}) => (
        <AwardsCollapse name={contestName}>
          {titles.map(({key}) => (
            <p>{key}</p>
          ))}
        </AwardsCollapse>
      ))}
    </div>
  ));
}

~祈祷文