Electron-React异步复制文件时React数字状态递增异常求助

你的问题核心是React状态的闭包特性导致的：fs.copyFile的异步回调会捕获组件渲染时的nbFilesCopied初始值（0），所以每个回调执行时都会把状态设为0 + 1 = 1，无法实现正确累加。

解决方案1：使用函数式更新状态 #

React的setState支持传入函数，该函数会接收当前最新的状态值，返回新状态。这样每次更新都基于最新的状态：

const oldPath = value.path;
const newPath = path.join(value.dest, value.name);
fs.copyFile(oldPath, newPath, (err) => {
  if (err) {
    // 错误状态也建议用函数式更新，避免同样的闭包问题
    setError(prevError => prevError + `Error with file ${value.name}\n`);
  } else {
    setNbFilesCopied(prevCount => prevCount + 1);
  }
});

解决方案2：Promise化批量处理（可选优化） #

如果需要更清晰的异步控制，可以把fs.copyFile包装成Promise，用Promise.all批量处理，最后统一更新状态：

// 包装fs.copyFile为Promise
const copyFilePromise = (oldPath, newPath) => {
  return new Promise((resolve, reject) => {
    fs.copyFile(oldPath, newPath, (err) => err ? reject(err) : resolve());
  });
};

// 批量复制处理函数
const handleBatchCopy = async (files) => {
  let successCount = 0;
  let errorMsg = '';

  await Promise.all(files.map(async (value) => {
    const oldPath = value.path;
    const newPath = path.join(value.dest, value.name);
    try {
      await copyFilePromise(oldPath, newPath);
      successCount++;
    } catch (err) {
      errorMsg += `Error with file ${value.name}\n`;
    }
  }));

  setNbFilesCopied(successCount);
  setError(errorMsg);
};

这种方式可以减少状态更新次数，同时让异步流程更易维护。

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