React结合Node实现contacts数组写入本地JSON/TXT文件的操作指引

函数放置位置说明 #

你拿到的handleSaveToPC是纯前端实现的文件下载函数，不需要单独拆成公共组件文件，直接放在App组件内部、所有状态定义和增删改平级函数的后面、JSX返回代码的前面即可——这样才能直接读取到组件内实时更新的contacts状态值，不会出现导出的是初始静态硬编码数据的问题。
你可以直接把优化后的导出函数嵌到App.js现有代码里，和updateContact函数保持平级：

const handleSaveToPC = (jsonData) => {
  // 第二、三个参数让导出的JSON带缩进，方便直接打开查看，不是压缩格式
  const fileData = JSON.stringify(jsonData, null, 2);
  // MIME类型设置为application/json，系统会自动识别文件格式
  const blob = new Blob([fileData], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.download = "my-contacts.json"; // 可自定义导出文件名
  link.href = url;
  link.click();
  // 触发下载后手动释放内存，避免内存泄漏
  URL.revokeObjectURL(url);
};

之前出现“声明的handleSaveToPC变量一直未被使用”的提示，本质是写完函数后没有在界面元素上绑定触发逻辑，函数从来没有被执行过。

绑定触发逻辑 #

在现有界面JSX中，找到“View contacts”对应的模块，增加一个导出按钮，把当前实时的contacts状态作为参数传给导出函数即可：

<div className="flex-large">
  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
    <h2>View contacts</h2>
    <button 
      onClick={() => handleSaveToPC(contacts)}
      style={{ padding: "6px 14px", cursor: "pointer", border: "1px solid #ddd" }}
    >
      导出为JSON文件
    </button>
  </div>
  {/* 原有ContactTable组件代码完全保留，不需要修改 */}
  <ContactTable
    contacts={contacts}
    editRow={editRow}
    deleteContact={deleteContact}
  />
</div>

适配其他导出格式的调整方法 #

• 如果需要导出txt文本文件，只需要修改两处：Blob的type值改为text/plain，link.download的文件名后缀改为.txt即可
• 这个方案是浏览器原生支持的前端下载能力，不需要搭配Node后端服务，完全满足把当前页面上编辑过的联系人数据存到本地电脑的需求

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