Question

我正在使用基于Firebase的反应网站。最近，我遇到了一些关于获取存储URL的问题。以下是我的代码。

(state, action) => {
  const snapshot = action.payload;
  const list = [];

  snapshot.forEach((child) => {
    list.push({
      key: child.key,
      user_bg_url: child.val().user_bg_url,
      user_hp: child.val().user_hp,
      user_id: child.val().user_id,
      user_img_url: child.val().user_img_url,
      user_login_yn: child.val().user_login_yn,
      user_msg_block: child.val().user_msg_block,
      user_token: child.val().user_token,
    });
  });

  list.forEach(async (user) => {
    await storage.getUserImage(user.user_img_url).then((url) => {
      user.user_img_url = url;
    });
  })

  return state.setIn(['users', 'list'], list);
}

getUserImage: (gs_url) => {
  return storage.refFromURL(gs_url).getDownloadURL();
},

我想在'list.forEach'工作后返回值。但它只是在'list.forEach'完成之前返回空白数组。

Answer 1

在return完成之前调用forEach是正确的，因此您需要返回一个承诺。使用Promise.all()和map可以在此处使用。

return Promise.all(list.map(async (user) => {
  await storage.getUserImage(user.user_img_url).then((url) => {
    user.user_img_url = url;
  });
})).then(() => {
  return state.setIn(['users', 'list'], list);
});

受this answer的启发。

如何在React和Firebase中的所有承诺后返回值？

1 个答案: