在提交表单之前让异步函数完成运行时遇到问题答案

【问题标题】：I am having problems getting an async function to finish running before submitting form在提交表单之前让异步函数完成运行时遇到问题
【发布时间】：2022-07-18 22:31:26
【问题描述】：

在使用 formik 将表单提交到 firestore 之前，我正在尝试从 firebase 存储中获取图像 URL 我是编程新手，我已经尝试了好几天。这是获取网址的代码

let uploadImage = async (uri, imageName) => {
const response = await fetch(uri);
const blob = await response.blob();
const storageRef = firebase.storage().ref("images/" + imageName);

storageRef.put(blob).then((snapshot) => {
  snapshot.ref.getDownloadURL().then((downLoadURL) => {
    console.log("file available at: ", downLoadURL);
    //setImageStorage(null);
    setImageStorage({ photo: downLoadURL });
    
  
  })
});

};

下面是设置 URL 状态的代码

const storageImage =  () => {
if (selectedImage !== null) {
   uploadImage(selectedImage.localUri, randomName)

} else {
  setImageStorage({ photo: defaultImage });
}

};

function submitForm(values) {
db.collection("item")
 .add({
    values,
    category: category,
    image: imageStorage.photo,
    latitude: newLatitude,
    longitude: newLongitude,
 }

formik 中的代码如下所示

<Formik
    initialValues={{ description: "", price: "", roomName: "" }}
    validationSchema={itemSchema}
    onSubmit={ async (values, actions) => {
     
     await storageImage().then((()=>{
        submitForm(values);
     }))
      
      

      actions.resetForm();
      setCategory("");
      setSelectedImage(null);

      setImageStorage(null);

      navigation.navigate("YardSale");

我收到以下错误：警告：从 submitForm() 中捕获到未处理的错误，[TypeError: null 不是对象（正在评估 'imageStorage.photo'）]

请帮忙

【问题讨论】：

您的uploadImage() 函数是async 函数，但您调用它时却不是await 的结果。
这并不能解决问题，但我建议尽可能避免将 async/await 与 Promise 混合使用。 uploadImage() 已经是一个异步函数，所以你应该使用 const snapshot = await storageRef.put(blob) 而不是 storageRef.put(blob).then((snapshot) => { 和 snapshot.ref.getDownloadURL().then((downLoadURL) => { 应该替换为 const downLoadURL = await snapshot.ref.getDownloadURL()。

标签： javascript firebase react-native async-await formik

【解决方案1】：

await storageImage().then((()=>{
        submitForm(values);
}))  // here values get added to the database before uploading image

uploadImage

let uploadImage = async (uri, imageName) => {
    const response = await fetch(uri);
    const blob = await response.blob();
    const storageRef = firebase.storage().ref("images/" + 
    imageName);
    
    const snapshot = await storageRef.put(blob){
    const downloadUrl = await snapshot.ref.getDownloadURL()
    console.log("file available at: ", downLoadURL);
    setImageStorage({ photo: downLoadURL });
}

storageImage

const storageImage = async () => { // added async
    if (selectedImage !== null) {
       await uploadImage(selectedImage.localUri, randomName) // added await
    } else {
      setImageStorage({ photo: defaultImage });
    }
}

In Formik

<Formik
    initialValues={{ description: "", price: "", roomName: "" 
    }}
    validationSchema={itemSchema}
    onSubmit={ async (values, actions) => {

     // you can't use await and then togather
     await storageImage();
     submitForm(values);
     
...

【讨论】：