React中如何将API GET请求结果存为JSON文件并导入组件使用？

JSON是纯静态结构化文件，本身不支持执行任何JS逻辑——不管是写fetch请求、定义变量还是写导出语句，只要在JSON文件里出现这类JS语法，文件解析就会直接报错，根本没法被正常导入。
你要实现的本质是把API请求从React客户端运行时，提前挪到项目构建/本地开发前的独立步骤：在前端代码跑起来之前，就把接口数据拉下来存成本地JSON文件，前端只需要读取本地静态资源就行，不需要自己发请求。

1. 编写独立的Node脚本拉取接口，生成静态JSON文件 #

• 单独写一个不需要依赖React环境的运行脚本（比如放在项目scripts目录下），专门负责发请求、写文件的逻辑
• 脚本逻辑非常简单：

  // scripts/fetch-api-data.js
  const fs = require('fs/promises');
  const API_URL = '你要请求的接口地址';
  
  async function generateStaticJson() {
    // 发起GET请求拿接口返回结果
    const response = await fetch(API_URL);
    const apiResult = await response.json();
    // 把结果序列化后写入你项目中指定的JSON文件路径
    await fs.writeFile('./src/data/example.json', JSON.stringify(apiResult, null, 2), 'utf8');
    console.log('本地JSON数据更新完成');
  }
  
  generateStaticJson();
  

• 你可以把这个脚本注册到package.json的命令行里，比如新增一条命令：

  "scripts": {
    "fetch-data": "node scripts/fetch-api-data.js",
    "build": "npm run fetch-data && 你的前端构建命令"
  }
  

  这样每次本地开发启动、或者项目打包的时候，都会先自动跑脚本拉取最新接口数据，覆盖生成本地的example.json文件，整个过程完全脱离React运行时，不需要启动前端服务就能完成。

2. 在React组件中直接导入生成的静态JSON #

等脚本把example.json生成之后，你在组件里的导入逻辑不需要额外的异步请求操作：

• 导入路径要和JSON文件的实际存放位置完全匹配（比如文件放在src/data目录下，就用对应相对路径导入）
• 导入拿到的内容就是现成的结构化接口数据，可以直接作为组件初始state使用，不需要再在useEffect里做请求逻辑
  简单的组件写法参考：

  // Buy.jsx
  import importedApiData from './data/example.json';
  import { useState } from 'react';
  
  export default function Buy() {
    // 直接把导入的静态数据作为state初始值，不需要额外发请求
    const [pageData, setPageData] = useState(importedApiData);
  
    return <div>{/* 用pageData渲染页面内容 */}</div>
  }
  

这种方案适合接口数据更新频率不高、不需要在客户端实时拉取最新值的场景。如果你的数据每次用户打开页面都需要拿最新版本，那提前生成静态JSON的模式就不适用了。
绝对不要在JSON文件里写任何JS语法，哪怕只是想写一行注释，JSON解析器都会直接报错。

内容的提问来源于stack exchange，提问作者liu duan