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 }) => {

  const subLevels = () => {

    let pageLevel = null;

    pageData.map((mappedData) => {

      if (mappedData.slug === childSlug) {

        pageLevel = mappedData;

        return pageLevel;

      } else {

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

          if (mappedData.slug === childSlug) {

            return (pageLevel = mappedData);

          } else {

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

              if (secondLevel.slug === childSlug) {

                pageLevel = secondLevel;

                return pageLevel;

              } else if (

                mappedData.childPages.childPage &&

                mappedData.childPages.childPages.length > 0

              ) {

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

                  if (thirdLevel.slug === childSlug) {

                    pageLevel = thirdLevel;

                    return pageLevel;

                  }

                });

              }

            });

          }

        } else {

          return false;

        }

      }

    });

    return pageLevel;

  };

  return <>{subLevels() && <SubPageTemplate pageLevel={subLevels()} />}</>;

};

export default subPageLevelFinder;