ReactJS中如何通过添加按钮向data.json文件动态新增key-2类数据

首先明确：纯前端React运行在浏览器沙箱中，无法直接修改项目目录下的本地data.json文件，不同场景的实现方案如下： #

场景1：仅运行时修改内存中的JSON数据（无需持久化写入原文件） #

如果只是需要在页面运行时修改已经加载到内存的JSON数据，不需要保存到本地原文件，可直接通过React状态实现：

• 第一步：导入本地data.json文件到组件，用useState托管数据状态
• 第二步：编写点击事件处理函数，修改状态值完成字段新增
• 第三步：给添加按钮绑定点击事件

代码示例 #

import { useState } from 'react';
// 导入项目中的data.json文件
import originData from './data.json';

function App() {
  const [jsonData, setJsonData] = useState(originData);

  const handleAddField = () => {
    setJsonData(prev => {
      // 新增key-2字段，值可按需自定义
      return {
        ...prev,
        "key-2": "你需要设置的key-2对应值"
      }
    })
  }

  return (
    <div>
      <pre>{JSON.stringify(jsonData, null, 2)}</pre>
      <button onClick={handleAddField}>添加key-2字段</button>
    </div>
  )
}

export default App;

场景2：需要持久化写入修改到本地data.json文件 #

需要搭配后端服务或者Node.js运行时的文件操作能力实现，以Next.js框架的API路由为例：

1. 新建pages/api/update-json.js接口文件，编写文件写入逻辑：

import fs from 'fs/promises';
import path from 'path';

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).end();
  // 定位data.json文件路径
  const jsonPath = path.join(process.cwd(), 'data.json');
  const originData = JSON.parse(await fs.readFile(jsonPath, 'utf8'));
  // 合并新字段写入文件
  const newData = { ...originData, ...req.body };
  await fs.writeFile(jsonPath, JSON.stringify(newData, null, 2));
  res.status(200).json(newData);
}

2. 前端组件中调用该接口完成持久化修改：

const handleAddField = async () => {
  const res = await fetch('/api/update-json', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ "key-2": "需要持久化保存的值" })
  });
  const updatedData = await res.json();
  setJsonData(updatedData);
}

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