问当上传一个文件以作出反应时，我可以获得上传的进度，但无法将其传递回进度条。定制钩子在这里有用吗？

EN

const LinearDeterminate = ({ uploadPercentage, setuploadPercentage }) => {
  const classes = useStyles();
  const [uploadPercentage, setuploadPercentage] = useState("");

  console.log(uploadPercentage);

  return (
    <div className={classes.root}>
      <LinearProgress variant="determinate" value={uploadPercentage} />
    </div>
  );
};

...
    <UploadInput
      path={`customer_creatives/assets/${customer_id}/${new Date().getTime()}`}
      onChange={(value) =>
        updateFieldHandler("link_to_assets")({ target: { value } })
      }
      value={submissionData["link_to_assets"] || ""}
      label="Link to Assets"
      sublabel="*Zip files before uploading"
      isImage={false}
    />
    <LinearDeterminate />
...

import React, { useState } from "react";
import ReactDropzone from "react-dropzone";
import axios from "axios";
import { noop } from "lodash";

import HelpDialog from "components/HelpDialog";
import { API_URL } from "config";

const Dropzone = ({
  path,
  onChange = noop,
  children,
  multiple = false,
  maxSize,
  sizeHelper,
  ...props
}) => {
  const [url, setUrl] = useState("");
  const [loading, setLoading] = useState("");
  const [uploadPercentage, setuploadPercentage] = useState("");
  const [sizeHelperOpen, setSizeHelperOpen] = useState(false);
  const onDrop = ([file]) => {
    const contentType = file.type; // eg. image/jpeg or image/svg+xml
    console.log(file);
    if (maxSize && maxSize < file.size) {
      setSizeHelperOpen(true);
      return;
    }

    const generatePutUrl = `${API_URL}/generate-put-url`;
    const generateGetUrl = `${API_URL}/generate-get-url`;
    const options = {
      onUploadProgress: (progressEvent) => {
        //console.log("progressEvent.loaded " + progressEvent.loaded)
        //console.log("progressEvent.total " + progressEvent.total)
        let percent = Math.round(
          (progressEvent.loaded / progressEvent.total) * 100
        );
        setuploadPercentage({
          uploadPercentage: percent,
        });
        console.log(uploadPercentage);
      },
      params: {
        Key: path,
        ContentType: contentType,
      },
      headers: {
        "Content-Type": contentType,
      },
    };

    setUrl(URL.createObjectURL(file));
    setLoading(true);

    axios.get(generatePutUrl, options).then((res) => {
      const {
        data: { putURL },
      } = res;
      axios
        .put(putURL, file, options)
        .then(() => {
          axios.get(generateGetUrl, options).then((res) => {
            const { data: getURL } = res;
            onChange(getURL);
            setLoading(false);
          });
        })
        .catch(() => {
          setLoading(false);
        });
    });
  };
  return (
    <ReactDropzone onDrop={onDrop} multiple={multiple} {...props}>
      {({ getRootProps, getInputProps }) => (
        <>
          <div {...getRootProps()}>
            <input {...getInputProps()} />
            {children({ url, loading })}
          </div>
          <HelpDialog
            open={sizeHelperOpen}
            onClose={() => setSizeHelperOpen(false)}
          >
            {sizeHelper}
          </HelpDialog>
        </>
      )}
    </ReactDropzone>
  );
};

export default Dropzone;