React表单提交时如何将state数据写入后端json/tsv文件新增行

整个实现分为前端提交数据、后端接收数据写入文件两个部分，全程使用JS技术栈，对熟悉React的开发者上手成本最低。

1. 前端React提交逻辑 #

给提交按钮绑定提交事件，在事件中把需要存储的数据以JSON格式发送给后端接口即可，示例代码如下：

// 提交事件处理函数
handleSubmit = async (e) => {
  e.preventDefault();
  // 取出state中需要存储的数据，可根据你的实际业务调整取值逻辑
  const submitData = {
    id: this.state.selectBoxes[0].id,
    selectedStrategies: this.state.selectBoxes[0].strategies
  };

  // 发送请求到后端接口
  try {
    await fetch('http://localhost:3001/api/submit-form', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(submitData)
    });
    alert('提交成功');
  } catch (err) {
    console.error('提交失败：', err);
  }
}

在你的提交按钮上绑定事件即可：

<button onClick={this.handleSubmit}>提交</button>

2. 后端实现（Node.js + Express） #

用最轻量化的Express框架搭建接口，接收前端传过来的数据后追加写入TSV文件，操作步骤如下：

1. 新建后端项目文件夹，初始化后安装依赖：

npm init -y
npm install express cors

2. 新建server.js文件，写入以下代码：

const express = require('express');
const cors = require('cors');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = 3001;

// 配置跨域和JSON请求解析
app.use(cors());
app.use(express.json());

// 定义master_data.tsv的存储路径，这里默认存在后端根目录，可自行调整
const TSV_FILE_PATH = path.resolve(__dirname, 'master_data.tsv');

// 表单提交接口
app.post('/api/submit-form', (req, res) => {
  const { id, selectedStrategies } = req.body;
  // 校验参数非空，避免写入无效数据
  if (!id || !selectedStrategies) {
    return res.status(400).json({ code: 400, msg: '参数缺失' });
  }
  // 将策略数组转为逗号分隔字符串，避免和TSV的制表符分隔规则冲突
  const strategiesStr = selectedStrategies.join(',');
  const tsvRow = `${id}\t${strategiesStr}\n`;

  // 文件不存在时先写入表头
  if (!fs.existsSync(TSV_FILE_PATH)) {
    const tsvHeader = 'id\tselected_strategies\n';
    fs.writeFileSync(TSV_FILE_PATH, tsvHeader, 'utf-8');
  }

  // 追加写入TSV文件
  fs.appendFile(TSV_FILE_PATH, tsvRow, 'utf-8', (err) => {
    if (err) {
      return res.status(500).json({ code: 500, msg: '数据存储失败' });
    }
    res.status(200).json({ code: 200, msg: '提交成功' });
  });
});

// 启动服务
app.listen(PORT, () => {
  console.log(`后端服务已启动，运行地址：http://localhost:${PORT}`);
});

3. 启动后端服务：

node server.js

注意事项 #

• 本地开发时如果React前端运行在3000端口，后端运行在3001端口，必须配置CORS否则会触发跨域报错，上述代码已经内置了CORS配置可直接使用
• 如果有高并发提交需求，建议添加文件锁避免写入冲突，个人小流量使用不需要额外处理
• 可以根据业务需要调整TSV的表头和行字段，只需要同步修改前后端的传参和拼接逻辑即可

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