[英]How to run a function first before updating the array in react JS?
const handleItinerary = (e, type) => {
var index = parseInt(e.target.name);
let arr = [...itinerary];
if (type === "imageUrl") {
const date = new Date().getTime();
const storageRef = ref(storage, `${date}`);
uploadBytes(storageRef, e.target.files[0]).then((snapshot) => {
getDownloadURL(storageRef).then((downloadURL) => {
arr[index]["imageUrl"] = downloadURL;
});
});
}
setitinerary(arr);
}
In the above code I am trying to upload an image in firebase storage using uploadBytes function and after uploading the image I get the downloadURL where image is stored, I want to put its value in arr[index]["imageUrl"], but the arr[index]["imageUrl"] is getting updated first before getting the downloadURL and I am getting error that downloadURL is undefined, so how to resolve this issue?在上面的代码中,我尝试使用 uploadBytes 函数在 firebase 存储中上传图像,在上传图像后,我得到了存储图像的 downloadURL,我想将它的值放在 arr[index]["imageUrl"] 中,但是arr[index]["imageUrl"] 在获取 downloadURL 之前首先进行更新,我收到 downloadURL 未定义的错误,那么如何解决这个问题? I am using react 18 and firebase version 9.我正在使用 react 18 和 firebase 版本 9。
When using then()
to run code in response to an asynchronous operation being completed, any code that needs to run upon completion has to be inside that then()
callback.当使用then()
运行代码以响应异步操作的完成时,任何需要在完成时运行的代码都必须在then()
回调中。
So所以
const handleItinerary = (e, type) => {
var index = parseInt(e.target.name);
let arr = [...itinerary];
if (type === "imageUrl") {
const date = new Date().getTime();
const storageRef = ref(storage, `${date}`);
uploadBytes(storageRef, e.target.files[0]).then((snapshot) => {
getDownloadURL(storageRef).then((downloadURL) => {
arr[index]["imageUrl"] = downloadURL;
setitinerary(arr);
});
});
}
}
To make this a bit more familiar, you can mark the `` as async
and use await
inside it:为了使它更熟悉一点,您可以将 `` 标记为async
并在其中使用await
:
const handleItinerary = async (e, type) => {
var index = parseInt(e.target.name);
let arr = [...itinerary];
if (type === "imageUrl") {
const date = new Date().getTime();
const storageRef = ref(storage, `${date}`);
const snapshot = await uploadBytes(storageRef, e.target.files[0]);
const downloadURL = await getDownloadURL(storageRef);
arr[index]["imageUrl"] = downloadURL;
setitinerary(arr);
}
}
Note that this doesn't change anything about the actual behavior and all asynchronous calls are still executed asynchronously.请注意,这不会改变任何有关实际行为的信息,并且所有异步调用仍将异步执行。 It is merely a more familiar way to write the code.它只是一种更熟悉的代码编写方式。
If you have a list of images to upload, be sure to either use for of
instead of forEach
or Promise.all
to detect when all asynchronous operations are done.如果您有要上传的图像列表,请务必使用for of
而不是forEach
或Promise.all
来检测所有异步操作何时完成。
You can move the code that updates the arr[index]["imageUrl"]
value inside the then
block where you retrieve the downloadURL
.您可以将更新arr[index]["imageUrl"]
值的代码移动到您检索downloadURL
的then
块中。 This will ensure that the arr[index]["imageUrl"]
value is only updated after the downloadURL
has been retrieved.这将确保arr[index]["imageUrl"]
值仅在检索到downloadURL
后更新。
const handleItinerary = (e, type) => {
var index = parseInt(e.target.name);
let arr = [...itinerary];
if (type === "imageUrl") {
const date = new Date().getTime();
const storageRef = ref(storage, `${date}`);
uploadBytes(storageRef, e.target.files[0]).then((snapshot) => {
getDownloadURL(storageRef).then((downloadURL) => {
arr[index]["imageUrl"] = downloadURL;
setitinerary(arr);
});
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.