React Native中Button的OnPress使用Async Await函数报错解决

错误原因 #

你直接写onPress={uploadImage(uri)}时，组件一渲染就会立刻执行uploadImage(uri)，而且onPress默认会把点击事件对象作为参数传给绑定的函数，这就导致uploadImage收到的是事件对象而非你传入的uri字符串，所以出现了参数类型不兼容的错误。

修复步骤 #

1. 正确绑定onPress回调
   用箭头函数包裹你的函数调用，确保只有点击按钮时才会执行uploadImage，并正确传递uri参数：

   <Button title="Upload Invoice" onPress={() => uploadImage(uri)} />
   

2. 优化异步函数的错误处理
   原代码里getDownloadURL放在了try/catch外面，就算上传失败也会执行这一步，容易引发额外错误，建议把它移到try块内，确保上传成功后再获取下载链接：

   const uploadImage = async (uri: string) => {  
     const pathToFile = uri;
     try {
       const response = await reference.putFile(pathToFile);
       const data = response.state;
       console.log(data);
       // 上传成功后再获取下载链接
       const imageUrl = await reference.getDownloadURL();
       setImageUrl(imageUrl);
     } catch (error) {
       console.log(error);
       // 这里可以添加用户可见的错误提示，比如Alert.alert('上传失败', error.message)
     }
   }
   

为什么箭头函数能解决问题？ #

箭头函数作为onPress的回调，只有在按钮被点击时才会触发执行，此时会调用uploadImage并传入你指定的uri，既避免了组件渲染时提前执行函数，也解决了参数类型不匹配的问题。

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