Ant Design“onChange”API 未在文件/目录上传中设置 React 挂钩

Question

• 我正在使用的内容： 我正在使用 Ant Design 的Upload 组件来上传文件目录。我将其与Ant Design的Progress组件一起使用。

• Desired Outcome： 我希望 Progress 组件在文件加载到 Upload Directory 时更新，以便用户可以实时查看正在加载的文件的百分比。

• 发生了什么： 我在上传 Ant Design 组件的 “onChange” API 中使用 React Hooks。我制作的 "percentageUploaded" 常量有效——它正确显示了实时上传文件的百分比。但是 "setUploadProgress" 挂钩不起作用。它只会在 “上传百分比” 达到 100% 并且上传过程完成时更新。

• 我想要发生的事情： 为了让这个组件工作，我需要 "setUploadProgress" 挂钩实时工作，意思是，我需要它 setUploadProgress 挂钩来存储 的实时状态“percentageUploaded” 常量，因此 Progress 组件可以显示上传进度的实时状态。

export const UploadDirectory: React.FC<UploadDirectoryProps> = () => {

const [uploadProgress, setUploadProgress] = useState<number>(0);

const handleChange = (data: any) => {
  const totalFiles = filesInFolder; //filesInFolder is set from another function, it stores the total number of files being uploaded
  setFilesInFolder(totalFiles);
  setUploadingFilesCount((uploadingFilesCount += 1));
  const percentageUploaded = Math.ceil(
    (uploadingFilesCount / totalFiles) * 100
  );
  setUploadProgress(percentageUploaded); //this is the hook that I need to update while files are loading
};


return (
<div>
  <Form.Item
    label="Upload Directory"
    name={"uploadDirectory"}
  >
    <UploadFolder
     directory
     onChange={handleChange}
     fileList={fileList}
     beforeUpload={beforeUpload}
     name={"uploadFolder"}
    >
      <Button icon={<UploadOutlined />}>Upload Directory</Button>
    </UploadFolder>
  </Form.Item>
  <Progress type="circle" percent={uploadProgress} />
</div>
)}