不使用useEffect，如何等待useState值更新后执行MongoDB帖子存储？

核心问题是你依赖了useState的异步更新来获取图片URL，但setImgURL不会立即更新imgURL的值，导致后续提交数据库时拿不到正确的URL。最直接的解决方式是让uploadImage函数直接返回上传后的图片URL，而非依赖状态存储，这样就能在handleSubmit中同步获取到结果。

修改步骤： #

1. 重构uploadImage函数：
   去掉内部的setImgURL（如果不需要在其他组件逻辑中复用这个URL的话），改为返回data.secure_url；同时在捕获错误时抛出异常，让上层的handleSubmit能处理上传失败的情况。

const uploadImage = async (image) => {
    console.log('uploading image');
    const formData = new FormData();
    formData.append('file', image);
    formData.append("upload_preset", presetValue);
    try{
        const response = await fetch(APIendPointURL, {
            method: 'POST',
            body: formData
        });
        const data = await response.json();
        console.log(data);
        // 直接返回图片URL，无需存入state
        return data.secure_url;
    } catch(err){
        console.log(err);
        setErrors(err);
        // 抛出错误，让handleSubmit感知上传失败
        throw err;
    }
}

2. 调整handleSubmit逻辑：
   调用uploadImage时直接接收返回的URL，然后将这个值和其他帖子数据一起提交到MongoDB。如果没有图片，就传null或者忽略该字段。

const handleSubmit = async (e) => {
    e.preventDefault(); // 别忘了阻止表单默认提交行为
    let uploadedImgURL = null;
    if (image){
        try {
            // 等待图片上传完成，同步拿到URL
            uploadedImgURL = await uploadImage(image);
        } catch (err) {
            // 图片上传失败时可添加用户提示，比如alert('图片上传失败，请重试')
            return;
        }
    }

    // 提交帖子数据到MongoDB
    try{
        const response = await fetch('http://localhost:3000/api/v1/post/create', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': localStorage.getItem('token')
            },
            body: JSON.stringify({
                content: e.target.content.value,
                imgURL: uploadedImgURL
            })
        });
        const data = await response.json();
        console.log(data);
        // 提交成功后的逻辑，比如重置表单、跳转至帖子列表页等
    } catch(err){
        console.log(err);
        setErrors(err);
    }
}

方案优势： #

• async/await确保图片上传完成后才执行数据库提交，完全规避时序问题
• 直接使用函数返回值而非useState，绕开了React状态更新的异步特性
• 错误链路清晰，图片上传失败时可直接终止提交，避免无效数据存入数据库

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