Reactjs 存储图像'；从firebase存储到firebase数据库的URL-URL在网络空间中丢失

这是一款带有Redux的React应用程序。表单从用户处收集新的配方数据。数据可以包括由用户选择用于上传的文件对象（图像）的阵列。我称之为

imagesToAdd

。一个操作称为

startAddRecipe

。需要做到以下几点：

将新配方写入firebase数据库-这将返回在存储器中存储图像所需的

ref.key

。-这样行吗

如果存在

imagesToAdd

函数，则会调用

uploadImages

，将图像上载到firebase存储并返回包含上载图像URL的数组。这样行吗

现在，上面（1.）中创建的配方需要使用（2.）中获得的URL进行更新-这不起作用

console.log

s正确显示URL，但它们未显示在firebase数据库中：

…在Redux商店中也没有：

      images: {
        imageNames: [
          'voteUpSmiley.png'
        ],
        imageUrls: []
      },

奇怪的是，redux logger工具在控制台中显示数据正常：

    images:
      imageNames: ["voteUpSmiley.png"]
      imageUrls: ["https://firebasestorage.googleapis.com/v0/b/mniam-…=media&token=0e9b7991-0314-4f24-a94a-6b24f93baed7"]

函数

uploadImages

包含异步任务-firebase存储上传和URL调用，因此我

等待结果并获得正确的结果，但它没有及时传递到后续语句，因为正如前面所说，firebase数据库和redux存储没有获得URL。我已经看了两天了，好像在转圈子

我在下面附上了相关代码，供关心此事的优秀人士参考。多谢各位

export const startAddRecipe = (recipeData = {}) => {
  return (dispatch, getState) => {
    const {
      authorEmail = '',
      brief= '',
      createdAt = 0,
      ingredients = { general: [] },
      keyWords = [], 
      preparation = { general: [] },
      publishedAt = 0,
      shared = false,
      tips = '',
      title = '',
      votes = {
        downs: [],
        ups: [],
      },
      imagesToAdd = [],
    } = recipeData

    let imageNames = []
    imagesToAdd.map(image => {
      imageNames.push(image.name)
    })

    let recipe = { 
      authorEmail, 
      brief,
      createdAt,
      images: {
        imageNames,
        imageUrls: [],
      },
      ingredients,
      keyWords,
      preparation,
      publishedAt,
      shared, 
      tips,
      title,
      votes,
    }
    
    console.log('recipeB4', recipe); //this is showing URLs even before image upload???

    database.ref(`recipes/`).push(recipe).then((ref) => {
      console.log('ref.key:', ref.key);
      if (imagesToAdd.length > 0) {
        (async () => {
          recipe.images.imageUrls = await uploadImages(ref.key, imagesToAdd)
          console.log('recipeAfterImageUpload', recipe); // URLS are shown here but not reflected in the next line
          database.ref(`recipes/${ref.key}`).update(recipe).then(() => {
            console.log('RECIPE ADDED & UPDATED');
          })
        })()
      }

      dispatch(addRecipe({
        id: ref.key,
        ...recipe,
      }))
      dispatch(startSetRecipeKeyWords())
    })
  }
}

export const startAddRecipe = (recipeData = {}) => {
  return (dispatch, getState) => {
    const {
      authorEmail = '',
      brief= '',
      createdAt = 0,
      ingredients = { general: [] },
      keyWords = [], 
      preparation = { general: [] },
      publishedAt = 0,
      shared = false,
      tips = '',
      title = '',
      votes = {
        downs: [],
        ups: [],
      },
      imagesToAdd = [],
    } = recipeData

    let imageNames = []
    imagesToAdd.map(image => {
      imageNames.push(image.name)
    })

    let recipe = { 
      authorEmail, 
      brief,
      createdAt,
      images: {
        imageNames,
        imageUrls: [],
      },
      ingredients,
      keyWords,
      preparation,
      publishedAt,
      shared, 
      tips,
      title,
      votes,
    }
    
    console.log('recipeB4', recipe); //this is showing URLs even before image upload???

    database.ref(`recipes/`).push(recipe).then((ref) => {
      console.log('ref.key:', ref.key);
      if (imagesToAdd.length > 0) {
        (async () => {
          recipe.images.imageUrls = await uploadImages(ref.key, imagesToAdd)
          console.log('recipeAfterImageUpload', recipe); // URLS are shown here but not reflected in the next line
          database.ref(`recipes/${ref.key}`).update(recipe).then(() => {
            console.log('RECIPE ADDED & UPDATED');
          })
        })()
      }

      dispatch(addRecipe({
        id: ref.key,
        ...recipe,
      }))
      dispatch(startSetRecipeKeyWords())
    })
  }
}

const uploadImages = (id, imagesToAdd) => {
  let imageUrls = []

  imagesToAdd.map(image => {
    const uploadTask = storage.ref(`/recipePics/${id}/${image.name}`).put(image)

    uploadTask.on('state_changed', 
    (snapShot) => {
      // console.log(snapShot)
    }, 
    (err) => {
      // console.log(err)
    }, 
    () => {
      storage.ref(`recipePics/${id}`).child(image.name).getDownloadURL()
      .then(fireBaseUrl => {
        console.log('fireBaseUrl', fireBaseUrl)
        imageUrls.push(fireBaseUrl)
      })
    })
  })

  return imageUrls
}