Electron+React应用删除记录后模态框字段无法交互问题

问题概述 #

• 基于Electron + React.js开发的桌面应用，单独执行创建/更新记录的模态框操作完全正常；
• 删除记录后立即打开新建模态框，输入字段会陷入非交互状态（无法聚焦、输入），需等待数秒才能恢复；
• 已尝试通过变量副本传递参数（如await addDepartment({name: ${deptName}, description: ${deptDescription}})），问题未解决；
• 纯React环境下在Chrome浏览器运行无异常，仅Electron环境出现该问题，推测与Electron自身Bug相关（截至2025年5月）。

可行排查与解决方向 #

1. 强制重新挂载模态框组件 #

给模态框添加动态唯一Key，每次打开新建模态框时更新Key，强制React重新挂载组件，规避Electron渲染层的缓存异常：

// 组件内状态定义
const [modalKey, setModalKey] = useState(Date.now());

// 删除后打开模态框时更新Key
const handleDeleteThenCreate = async (id) => {
  await deleteDepartment(id);
  setModalKey(Date.now());
  setIsCreateModalOpen(true);
};

// 模态框组件使用Key
<Modal key={modalKey} open={isCreateModalOpen} onClose={handleClose}>
  {/* 输入字段内容 */}
</Modal>

2. 延迟打开模态框 #

在删除操作完成后，延迟几百毫秒再触发新建模态框的打开逻辑，给Electron渲染进程留出状态同步时间：

const handleDeleteThenCreate = async (id) => {
  await deleteDepartment(id);
  // 延迟300ms打开模态框，可根据实际情况调整时长
  setTimeout(() => setIsCreateModalOpen(true), 300);
};

3. 检查Electron进程通信与上下文配置 #

• 确认electron.js中上下文隔离（contextIsolation）的配置，避免主进程与渲染进程的状态冲突：

const mainWindow = new BrowserWindow({
  webPreferences: {
    contextIsolation: true,
    nodeIntegration: false,
    // 确保preload脚本正确配置，避免阻塞渲染线程
    preload: path.join(__dirname, 'preload.js')
  }
});

• 若数据操作依赖主进程的ipcMain/ipcRenderer通信，尝试将逻辑迁移至渲染进程执行，减少跨进程通信的延迟与冲突。

4. 调整Electron版本 #

由于推测为Electron版本Bug，尝试更新至最新稳定版或回退到已知无异常的稳定版本：
修改package.json中的Electron依赖版本后，重新安装依赖：

"devDependencies": {
  "electron": "^29.3.0"
}

执行命令更新：

npm install

内容的提问来源于stack exchange，提问作者Francisco IA Lover