使用Amplify Storage.put函数的react钩子和progressCallback时状态未更新

Question

我正在尝试使用Amplify Storage progressCallback函数添加可视化指示器，指示上传进度，但是我无法从progressCallback函数内部更新状态。下面的代码可以正常运行，但是无法更新加载挂钩。

我认为这与我如何将状态传递给callBack函数有关，但是如果是这种情况，我不确定解决方案是什么。希望有帮助。

const CustomCard = () => {
  const [loading, setLoading] = useState(null);

  const CustomFunc = progress => {
    setLoading(progress);
    console.log(loading);
  };

  const onChange = async e => {
    const file = e.target.files[0];
    const fileName = "test";
    const result = await Storage.put(fileName, file, {
      customPrefix: { public: "public/" },
      progressCallback: progress => {
        CustomFunc(progress.progress);
      },
    });
  };

  return (
    <React.Fragment>
       <input
           id="add-image-file-input"
           type="file"
           accept="image/*."
           onChange={onChange}
           style={{ display: "none" }}
       />
       <FileUploadProgress loading={loading} />
    </React.Fragment>
  )
}