React上传文件时upload函数内myfiles状态始终为空问题排查

问题现象 #

实现React文件上传组件时，App.tsx中的uploadFiles函数内myfiles.length始终为0，尽管主组件的文件数组状态已经正确更新。尝试改为箭头函数后问题依旧。

原因分析 #

核心问题是React闭包陷阱结合useCallback的依赖缺失：

1. 子组件FileUploadWidgetDropzone中，onDrop使用了useCallback但依赖项为空数组，导致它始终引用组件首次渲染时的uploadFiles函数。
2. 首次渲染时的uploadFiles捕获的是初始状态的myfiles（空数组），后续即使主组件状态更新，onDrop仍调用旧的uploadFiles，因此读取到的myfiles永远是空数组。
3. 直接在uploadFiles中读取myfiles也存在闭包问题，因为函数创建时捕获的是当时的状态值，无法实时获取最新状态。

修复方案 #

1. 修复子组件的useCallback依赖 #

在FileUploadWidgetDropzone中，给onDrop的useCallback添加正确的依赖项uploadFiles，确保状态更新后onDrop能引用最新的uploadFiles函数：

const onDrop = useCallback((acceptedFiles: any) => {
  uploadFiles(acceptedFiles);
}, [uploadFiles]); // 添加uploadFiles作为依赖

2. 使用函数式更新获取最新状态 #

在App.tsx的uploadFiles中，通过setMyFiles的函数式更新获取最新的状态prevState，避免直接读取闭包中的旧状态：

const uploadFiles = (files: File[]) => {
  setMyFiles((prevState) => {
    // 基于最新状态判断文件数量
    if (prevState.length + files.length > 4) {
      console.log("ERROR TOO MANY FILEs");
      return prevState; // 超出限制时不更新状态
    }
    return [...prevState, ...files];
  });
}

3. 优化removeFile函数（可选） #

同样的闭包问题也存在于removeFile中，建议改用函数式更新并使用filter更安全地删除文件：

function removeFile(file: File) {
  setMyFiles((prevState) => {
    const newFiles = prevState.filter(f => f !== file);
    // 基于最新状态执行后续逻辑
    if (prevState.length <= 4) {
      // 你的业务逻辑
    }
    return newFiles;
  });
}

说明 #

通过以上修改，既能确保uploadFiles始终读取到最新的状态值，也能解决子组件因useCallback依赖缺失导致的旧函数引用问题，彻底修复文件数量判断失效的问题。

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