Gatsby中ES6 Map返回Null及读取JSON属性报错求助

这种情况大多是数据加载时机或者数据结构完整性的问题，我来给你拆解下可能的原因和解决办法：

1. 先确认数据与查询的完整性 #

• 检查你的JSON文件：确保results数组里的每一个对象都包含account字段，没有null/undefined的元素，也没有遗漏字段的情况。
• 核对GraphQL查询：确保你在查询里明确请求了account字段，比如：

query AccountQuery {
  allAccountsJson { # 这里的类型名是Gatsby根据你的JSON文件名生成的，比如文件叫accounts.json就是allAccountsJson
    nodes {
      results {
        account
      }
    }
  }
}

2. 处理组件渲染时的加载状态 #

Gatsby在开发模式下热重载，或者构建过程中，可能会出现数据还未完全加载就渲染组件的情况，这时候嵌套属性就会因为undefined报错。你可以通过可选链操作符（?.）和默认值来做防御性编程：

import { useStaticQuery, graphql } from "gatsby";

const AccountComponent = () => {
  const data = useStaticQuery(graphql`
    query AccountQuery {
      allAccountsJson {
        nodes {
          results {
            account
          }
        }
      }
    }
  `);

  // 先确保nodes存在，给个空数组默认值
  const accountNodes = data.allAccountsJson?.nodes || [];

  return (
    <div>
      {accountNodes.map((node) => {
        // 确保node.results是数组，避免undefined
        const results = node?.results || [];
        return results.map((result) => {
          // 最后检查result.account是否存在，再渲染
          if (!result?.account) return null;
          return <div key={result.account}>{result.account}</div>;
        });
      })}
    </div>
  );
};

export default AccountComponent;

3. 排查热重载时的数据更新问题 #

如果是修改JSON文件后热重载才出现报错，可能是Gatsby的文件监听或者缓存问题：

• 检查gatsby-config.js里的gatsby-source-filesystem配置，确保正确指向了JSON文件所在的目录，并且没有排除该文件：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`, // 你的JSON文件所在路径
      },
    },
    `gatsby-transformer-json`,
  ],
};

• 可以尝试重启Gatsby开发服务器，清除缓存（运行gatsby clean后再gatsby develop），避免缓存导致的数据不一致。

为什么直接取node.results[0].account没问题？因为首次加载时数据是完整的，results[0]存在；但后续热重载时，组件可能在数据还没更新完成就渲染，此时results可能是空数组或者undefined，访问[0].account就会报错——而map操作如果遇到空数组会直接跳过，不会执行内部逻辑，但如果是results本身是undefined，调用map就会先报错，这时候用node?.results || []就能避免这个问题。

内容的提问来源于stack exchange，提问作者Gopesh Sharma