javascript - GatsyJS、GraphQL - 通过数组发布映射。

Question

我正在使用 GatsbyJS 构建一个分离的 drupal 站点。我正在尝试显示 nodePersonalInformation 的标题。这是 GatsbyJS graphQL playground 中的查询:

{
  allUserUser(filter: {name: {eq: "bobdole"}}) {
    edges {
      node {
        name
        relationships {
          nodePersonalInformation {
            title
          }
        }
      }
    }
  }
}

查询结果:

{
  "data": {
    "allUserUser": {
      "edges": [
        {
          "node": {
            "name": "bobdole",
            "relationships": {
              "nodePersonalInformation": [
                {
                  "title": "bobdole"
                },
                {
                  "title": "bobdole"
                }
              ]
            }
          }
        }
      ]
    }
  }
}

我使用这些变量成功地显示了“名称”:

const data = this.props.data.allUserUser.edges
const personalInfo = data.map(pI => <span>{pI.node.name}</span>)

但是，因为“nodePersonalInformation”是一个数组，所以我不知道如何显示“title”。我试过 .map 里面的 .map 没有运气。任何帮助将不胜感激。

谢谢安迪

Answer 1

您可以获得 nodePersonalInformation 中包含的两个标题属性，然后获取此数组的第一个元素。

为此，首先，您必须获取nodePersonalInformation。
试试这个

const titles = data.map(edge => edge.node.relationships.nodePersonalInformation.map(title => title)[0]);

[0] 在该行的末尾允许您只获得第一个 map 的第一个结果。如果你不这样做，你会得到一个数组的数组。

之后，你可以用这行得到你想要的标题:
const uniqueTitle = title[0]

如果你总是有一条边，你也可以强制获取第一个边项:
常量数据 = this.props.data.edges[0]。这样，在获取标题数组时就不需要[0]了。