Question

我有一个函数可以一次上传多个文件，为此，我必须等到所有文件都上传完毕，然后我想调用一个函数。

我有两个钩子

    const [attachments, setAttachments] = useState([]);
    const [uploadedAttachments, setuploadedAttachments] = useState([]);

attachments 包含选定的文件，然后当文件上传时，我将一些关于它的元数据存储在 uploadedAttachments 中，我需要通过另一个调用发送。

所以在按下上传按钮时，我调用了这个函数：

async function uploadAttachments(userID, id) {
        await Promise.all(
            attachments.map(async (val, index) => {
                await services.uploadAttachment(val, userID, id).then((res) => {
                    setuploadedAttachments([...uploadedAttachments, { "name": res.name, "size": res.size }])
                }).catch((error) => {
                    Alert.alert("Error", error)
                })
            })).then(() => {
                console.log(JSON.stringify(uploadedAttachments))
            }).catch((e) => {
                console.log("ERROR: " + e)
            })
}

JSON.stringify(uploadedAttachments) 打印 [] 但如果我在 console.log 之前 res 调用 setuploadedAttachments 我看到我收到响应，这意味着setuploadedAttachments 正在更新，但我打印它的地方显示我为空数组。那么，我如何确保它 await 并且在 Promise.all 完成后我可以看到它？

更新

我的问题不是useState set method not reflecting change immediately

的重复

我在等待所有的承诺兑现。每个承诺返回一些数据时，我将其添加到我使用 useState 钩子处理的数组中。是的，它没有立即反映更改，我已尝试按照假定的重复问题中的建议将其放入 useEffect 挂钩中。

useEffect(() => {
     setuploadedAttachments([...uploadedAttachments, { "name": res.name, "size": res.size }])
}, [])

它显示标题中带有 Error 的警报，但没有错误消息。简而言之，它不起作用。

更新 2

根据我所做的评论

async function uploadAttachments(userID, id) {
        await Promise.all(
            attachments.map(async (val, index) => {
                await services.uploadAttachment(val, userID, id).then((res) => {
                    return res
                }).catch((error) => {
                    Alert.alert("Error", error)
                })
            })).then((responses) => {
                console.log(JSON.stringify(responses))
            }).catch((e) => {
                console.log("ERROR: " + e)
            })
}

services.uploadAttachment 函数是

async function uploadAttachment(val, userID, id) {

    let fullURL = BASE_URL + '/uploadFile'
    
    const data = new FormData()
    data.append(...

    const config = {
       ...
    };

    return new Promise((res, rej) => {
        axios.post(fullURL, data, config).then((response) => {
            res(response.data)
        }).catch((error) => {
            console.log(error)
            Alert.alert("Error Occured", error);
        })
    })
}

Promise.all 不等待状态更新

0 个答案: