如何在React.js中永久删除.txt文件中的指定条目？

你当前的filter方法只能修改前端内存中的状态，无法永久删除文件内容——因为前端代码运行在浏览器中，没有权限直接操作服务器上的文件，必须通过后端接口来完成文件修改操作。以下是完整可行的方案：

第一步：搭建后端接口（以Express为例） #

React是纯前端框架，需要搭配一个简单的后端服务来处理文件读写请求：

1. 初始化后端项目（在你的React项目根目录外或同级目录）：

mkdir shipment-backend && cd shipment-backend
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();
app.use(cors());
app.use(express.json());

// 配置shipments.txt的路径（根据你的项目结构调整，示例为React项目public文件夹路径）
const SHIPMENTS_FILE = path.join(__dirname, '../your-react-project/public/shipments.txt');

// 删除指定条目接口
app.delete('/api/shipments/:id', (req, res) => {
  try {
    // 读取并解析文件内容
    const rawData = fs.readFileSync(SHIPMENTS_FILE, 'utf8');
    let shipments = JSON.parse(rawData);

    // 根据前端传入的id（索引+1）过滤条目
    const targetIndex = parseInt(req.params.id) - 1;
    shipments = shipments.filter((_, index) => index !== targetIndex);

    // 将修改后的数据写回文件
    fs.writeFileSync(SHIPMENTS_FILE, JSON.stringify(shipments, null, 2));

    res.status(200).json({ success: true, message: '条目已永久删除' });
  } catch (error) {
    console.error('删除失败:', error);
    res.status(500).json({ success: false, message: '服务器内部错误' });
  }
});

// 启动后端服务
app.listen(5000, () => {
  console.log('后端服务运行在 http://localhost:5000');
});

第二步：修改前端删除逻辑 #

更新shipmentsTableData.js中的onRemoveItem函数，调用后端接口完成永久删除：

const onRemoveItem = async (id) => {
  try {
    // 调用后端删除接口
    await axios.delete(`http://localhost:5000/api/shipments/${id}`);
    // 接口调用成功后，更新前端状态
    const updatedShipments = shipmentsData.filter((_, index) => index !== id - 1);
    setShipmentsData(updatedShipments);
  } catch (err) {
    console.error('删除请求失败:', err);
    // 可在此添加错误提示（如Toast、Alert）
  }
};

关键注意事项 #

1. 路径配置：确保后端代码中SHIPMENTS_FILE的路径与你的React项目public文件夹路径完全匹配，否则会找不到文件。
2. 唯一ID优化：建议给每个shipment数据添加独立的id字段（而非用索引+1作为id），这样删除逻辑更可靠，避免因数据顺序变化导致删错条目。
3. 服务启动顺序：先启动后端服务（node server.js），再启动React项目，确保两个服务分别运行在5000和3000端口。

这样操作后，点击清除按钮时，后端会直接修改shipments.txt文件内容，实现永久删除，下次刷新页面或重新请求数据时，已删除的条目不会再出现。

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