- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
有人可以帮助我理解我做错了什么吗?考虑这个简单的代码
var images = [];
const [funImage, setFunImage] = useState([]);
//Some function that does this below
firebase.firestore().collection('PostedFunActivities').where("location", "==" , place).get().then((querySnapshot) =>{
querySnapshot.forEach(async(doc) =>{
const ref = firebase.storage().ref('images/'+ doc.data().image)
const result = await ref.getDownloadURL();
images.push(result);
})
setFunImage(images);
});
我不明白为什么 setFunImage(images);
在 images.push(result);
完成将所有结果插入数组之前执行。我认为等待会阻止其下面的其余代码基本上,我想要做的事情背后的概念是将所有结果推送到images
,然后调用setFunImage(images);
。
我怎样才能实现这一目标?这可能吗?
编辑
我更改了代码,希望找到解决方案,这就是我到目前为止所达到的目标:
firebase.firestore().collection('PostedFunActivities').where("location", "==" , place).get().then((querySnapshot) => {
querySnapshot.forEach(async(doc) => {
const ref = firebase.storage().ref('images/' + doc.data().image)
const result = await ref.getDownloadURL();
images.push(result);
setFunImage(...funImage,images);
})
});
有趣的是,当这个函数执行时,funImage
会填充 1 个图像,但是当我刷新时,它会填充我的 firebase 中的其余图像。
最佳答案
该代码不起作用,因为您的 forEach 正在运行异步代码。这意味着它将在您设置图像后完成运行。这是一个修复程序,并在评论中提供了一些解释 -
// No need for images array outside
const [funImage, setFunImage] = useState([]);
...
firebase.firestore().collection('PostedFunActivities').where("location", "==" , place).get().then(async (querySnapshot) =>{
// instead of foreach, using map to aggregate the created promises into one array
// Promise.all takes an array of promises and resolves after all of them completed running
// returns an array with the promise results
const images = await Promise.all(querySnapshot.map(async(doc) =>{
const ref = firebase.storage().ref('images/'+ doc.data().image)
const result = await ref.getDownloadURL();
return result;
}));
setFunImage(images);
});
关于reactjs - {React Native} Async\Await 无法与 setState 正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61630313/
我有一个 forEach循环处理数组中的数据。在该循环中间的某个地方,我必须等待 DOM 元素的更改,获取该更改,处理它,然后才能继续处理数组。 我希望在控制台中看到这个: Preparing "aa
给定以下方法: public async Task DoSomethingAsync() { // do some work await OpenSomeFileAsync();
尝试在 .exports 中运行一个异步函数,获取 Promise,然后在下一个异步函数中使用结果,但由于某种原因,无论等待如何,第二个函数都会在第一个函数之前执行。 销售.js = const sq
谁能解释为什么 c# 5 中的异步函数需要至少有 1 个等待?我找不到明确的理由/解释。 所谓必需,是指当异步函数内部没有任何 await 调用时编译器会发出警告,但不会抛出编译错误。 来自 this
我想用 Mocha 测试异步代码. 我跟着这个教程testing-promises-with-mocha .最后,它说最好的方法是 async/await。 以下是我的代码,我打算将 setTimeo
这个问题在这里已经有了答案: How do yield and await implement flow of control in .NET? (5 个答案) How is resumption
我想在 trait 中编写异步函数,但是因为 async fn in traits 还不被支持,我试图找到等效的方法接口(interface)。这是我在 Rust nightly (2019-01-0
在 node.js 中,我有一个数据库事务,我想在 then 回调中调用一个 async 方法,但我收到错误消息 关键字“等待”已保留。 这是异步 saveImage 函数: const saveIm
我正在包装 AspNet.Identity。但有些事情让我对 TPL 感到困惑。 第一个例子: public virtual async Task RemovePasswordAsync(st
我有三个 showDialog 示例。我认为 _showAlert1 是正确的,但它使用 2 个函数来实现它。 _showAlert2 也有效,但我认为它不正确,因为我认为 showDialog 是异
我正在编写一个应该尽可能快地执行所有异步函数的函数,但是,它们中只有 5 个可以同时运行。 我想使用 Promise.race 来实现,所以实现不是最好的。问题是代码执行不会在 await 处停止。我
在 Scala 和其他编程语言中,可以使用 Futures 和 Await。 (在实际代码中,会使用例如 zip+map 而不是 Await) def b1() = Future { 1 } def
这个问题在这里已经有了答案: At the end of an async method, should I return or await? (2 个回答) 8年前关闭。 我做了一些阅读,并认为我已
我知道这是一个非常开放的问题,我深表歉意。 我可以看到 Await.ready返回 Awaitable.type而 Await.result返回 T但我仍然混淆他们。 两者有什么区别? 一个是阻塞的,
为什么等待者(GetAwaiter - 使类可等待)是结构而不是类。使用类有什么坏处吗? public struct ConfiguredTaskAwaiter : ICriticalNotifyCo
这个问题在这里已经有了答案: Why doesn't Scala's Future have a .get / get(maxDuration) method, forcing us to resor
async/await 链中的所有函数都必须使用 async/await 关键字吗? async function one() { return await fetch(.....); } asy
点击组件的按钮时将执行以下方法。 async onClickButton() { await this.shoppingCartService.add(this.selectedOffer);
它似乎被记录在案的唯一地方是 this issue thread和 the actual specification .但是,删除的原因并没有在我能找到的任何地方发布。 新的推荐方式似乎是await
为什么使用 await 需要将其外部函数声明为 async? 例如,为什么这个 mongoose 语句需要它所在的函数来返回一个 promise? async function middleware(
我是一名优秀的程序员,十分优秀!