如何在React Native的AWS Amplify中传递S3上传进度并更新组件状态？

你的核心问题在于**progressCallback里的this指向不对**，而且直接修改外部变量没法触发React组件重新渲染。我给你两个靠谱的修复方式：

方案1：用箭头函数绑定组件上下文 #

箭头函数会自动继承外层作用域的this（也就是你的组件实例），这样就能正常调用setState了：

Storage.put(text, Buffer.from(photo.base64, "base64"), {
  progressCallback: (progress) => {
    const uploadProgress = parseInt((progress.loaded / progress.total) * 100) + "%";
    console.log(uploadProgress);
    this.setState({ uploadProgress }); // 这里的this现在指向组件实例
  },
  contentType: "image/jpeg"
});

方案2：提前保存组件的this引用 #

如果你偏好使用普通函数，可以在调用Storage.put之前，把组件的this存到一个变量里，在回调里用这个变量来调用setState：

// 先把组件的this存起来
const componentThis = this;
Storage.put(text, Buffer.from(photo.base64, "base64"), {
  progressCallback(progress) {
    const uploadProgress = parseInt((progress.loaded / progress.total) * 100) + "%";
    console.log(uploadProgress);
    componentThis.setState({ uploadProgress }); // 使用保存的this引用
  },
  contentType: "image/jpeg"
});

额外提醒 #

• 别再用外部变量prog来存进度了，React组件的状态更新必须通过setState（类组件）或者useState（函数组件），这样才会触发组件重新渲染，更新UI。
• 如果你用的是函数组件，直接用useState定义状态，然后在箭头函数里调用状态更新函数就行，示例如下：

import { useState } from 'react';

// 函数组件内
const [uploadProgress, setUploadProgress] = useState("0%");

// 上传逻辑
Storage.put(text, Buffer.from(photo.base64, "base64"), {
  progressCallback: (progress) => {
    const newProgress = parseInt((progress.loaded / progress.total) * 100) + "%";
    console.log(newProgress);
    setUploadProgress(newProgress);
  },
  contentType: "image/jpeg"
});

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