React 18中如何先完成Firebase上传再更新状态数组？

原问题代码 #

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);

    }

问题描述 #

我使用React 18和Firebase 9版本，编写上述handleItinerary函数尝试将图片上传至Firebase Storage，期望获取图片的downloadURL后，将其赋值给arr[index]["imageUrl"]并更新itinerary数组。但目前setitinerary(arr)在downloadURL获取完成前就已执行，导致出现downloadURL未定义的错误，请问该如何解决此问题？

解决方案 #

问题核心是异步操作的执行顺序：uploadBytes和getDownloadURL都是异步Promise操作，而setitinerary(arr)是同步执行的，所以在下载URL还未返回时就更新了状态，自然拿不到有效值。

方法一：嵌套Promise中调用状态更新 #

将setitinerary放到最内层的then回调中，确保只有拿到downloadURL后才更新组件状态：

const handleItinerary = (e, type) => {
    const 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;
                // 拿到URL后再更新状态
                setitinerary(arr);
            });
        });
    } else {
        // 非图片类型的处理逻辑，直接更新状态
        setitinerary(arr);
    }
}

方法二：使用async/await简化异步逻辑 #

用async/await语法让异步代码更易读，同样保证在获取URL后再更新状态：

const handleItinerary = async (e, type) => {
    const index = parseInt(e.target.name);
    let arr = [...itinerary];
    
    if (type === "imageUrl") {
        const date = new Date().getTime();
        const storageRef = ref(storage, `${date}`);
        
        // 等待图片上传完成
        await uploadBytes(storageRef, e.target.files[0]);
        // 等待获取下载URL
        const downloadURL = await getDownloadURL(storageRef);
        
        arr[index]["imageUrl"] = downloadURL;
        // 更新组件状态
        setitinerary(arr);
    } else {
        setitinerary(arr);
    }
}

额外优化：添加错误处理 #

为避免上传或获取URL失败时程序崩溃，可增加错误捕获逻辑：

const handleItinerary = async (e, type) => {
    const index = parseInt(e.target.name);
    let arr = [...itinerary];
    
    if (type === "imageUrl") {
        try {
            const date = new Date().getTime();
            const storageRef = ref(storage, `${date}`);
            
            await uploadBytes(storageRef, e.target.files[0]);
            const downloadURL = await getDownloadURL(storageRef);
            
            arr[index]["imageUrl"] = downloadURL;
            setitinerary(arr);
        } catch (error) {
            console.error("图片上传或URL获取失败：", error);
            // 这里可添加用户友好的错误提示，比如弹窗提示上传失败
        }
    } else {
        setitinerary(arr);
    }
}

内容的提问来源于stack exchange，提问作者Techie