Gatsby 函数返回未定义

Question

我有一个文件，我尝试在其中确定应该在 Gatsby 模板中使用哪些数据。我得到一个包含子页面的数组作为回报，这些子页面可能包含其他子页面。我想支持最多三个级别的子页面。

我有一个模板，我在其中使用我的分页器（用于查找正确页面的组件），我寻找正确的页面以通过来自 gatsby-node.js 的 pageContext 绕过 slug

模板（减去进口）

const projectsSubPages = ({ data, pageContext }) => {

  return (

    <Layout>

      <Menu parentPage={pageContext.parentSlug} />

      {data.allSanityProjects.edges.map((childNode) =>

        <>

          {childNode.node.childPages.length > 0 &&

            <Paginator

              pageData={childNode.node.childPages}

              parentPage={pageContext.parentSlug}

              key={childNode.node._id}

            />

          }

        </>

      )}

    </Layout>

  );

};

export const query = graphql`

{

  allSanityProjects {

    edges {

      node {

        childPages {

          _rawBlockContent

          title

          slug

          childPages {

            slug

            title

            childPages {

              title

              slug

              childPages {

                slug

                title

                _key

              }

              _key

            }

            _key

          }

          _key

        }

        _key

      }

    }

  }

}

`;

export default projectsSubPages;

我的分页器组件（减去导入）

   const subPageLevelFinder = ({ pageData, parentPage }) => {

  const SubLevels = () => {

    let pageLevel = "test";

    if (pageData.slug === parentPage) {

      pageLevel = pageData.slug

    }

    if (pageData.childPages && pageData.childPages.length > 0) {

      pageData.childPages.map((secondLevel) => {

        if (secondLevel.slug === parentPage) {

          pageLevel = secondLevel.slug

          return (pageLevel)

        } 

有关 GraphQL 查询和 gatsby-node.js 的返回，请参阅此要点 https://gist.github.com/AndreasJacobsen/371faf073a1337b6879e4fd6b860b26f

我的目标是在我的分页器中运行一个具有模板的组件，并从 SubLevels 函数传递此模板应使用的数据，但此函数每次都返回第一个 set 值。所以我所有的 if 语句都失败了，我不知道问题出在哪里，我尝试过多次更改 if 参数，但这似乎适合 GraphQL 查询

Answer 1

事实证明，错误来自我试图访问多维数组中的数组元素。所以我得到的数组有三个元素，都带有一个 slug。我试图访问蛞蝓，但为了得到蛞蝓，我不得不遍历元素。请参阅有效的附加解决方案（但效率不高），请注意此解决方案在最顶层具有地图功能；这解决了这个问题。import React from "react";import SubPageTemplate from "./subPageTemplate";import { Link } from "gatsby";import { useStaticQuery, graphql } from "gatsby";const BlockContent = require("@sanity/block-content-to-react");const subPageLevelFinder = ({ pageData, parentPage, childSlug }) => {&nbsp; const subLevels = () => {&nbsp; &nbsp; let pageLevel = null;&nbsp; &nbsp; pageData.map((mappedData) => {&nbsp; &nbsp; &nbsp; if (mappedData.slug === childSlug) {&nbsp; &nbsp; &nbsp; &nbsp; pageLevel = mappedData;&nbsp; &nbsp; &nbsp; &nbsp; return pageLevel;&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; if (mappedData.childPages && mappedData.childPages.length > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (mappedData.slug === childSlug) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (pageLevel = mappedData);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mappedData.childPages.map((secondLevel) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (secondLevel.slug === childSlug) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageLevel = secondLevel;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return pageLevel;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mappedData.childPages.childPage &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mappedData.childPages.childPages.length > 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; secondLevel.childPages.map((thirdLevel) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (thirdLevel.slug === childSlug) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageLevel = thirdLevel;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return pageLevel;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; return pageLevel;&nbsp; };&nbsp; return <>{subLevels() && <SubPageTemplate pageLevel={subLevels()} />}</>;};export default subPageLevelFinder;