Question

这是带有Redux的React应用。表格收集用户的新配方数据。数据可以包括由用户选择用于上传的文件对象（图像）的阵列。我称之为imagesToAdd。一个动作称为startAddRecipe。需要发生以下情况：

将新配方写入Firebase数据库-这将返回在存储中存储图像所需的ref.key。 -这样行得通
如果有imagesToAdd，则调用函数uploadImages，该函数将图像上传到Firebase存储并返回包含上传图像URL的数组。这行得通
现在需要使用在（2.）中获得的URL更新在上述（1.）中创建的配方-这不起作用。 console.log个网址显示正确，但未显示在Firebase数据库中：

images
  imageNames
    0: "voteUpSmiley.png"
  (no imageUrls)

...在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的调用，因此我await来获取结果并获得正确的结果，但是它没有及时传递给后续语句，因为如前所述firebase数据库和redux存储未获取URL。我已经看了2天了，好像转圈了。

我在下面提供了相关代码，以帮助有需要的人看看。谢谢。

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
}

将图像的URL从Firebase存储存储到Firebase数据库中-URL在网络空间中丢失

0 个答案: