Next.js+Cloudinary头像上传：首次提交urlImagen状态未被后端接收

问题场景 #

在Next.js项目中使用Cloudinary实现用户头像上传功能，后端基于Node.js+MongoDB编写controller处理用户资料编辑请求。触发handleSubmit函数时，Cloudinary返回的图片URL存入urlImagen状态，并作为datosActualizados对象的一部分传给后端controller。但首次触发handleSubmit时，后端无法正确接收该状态值，第二次提交才恢复正常。尝试添加setTimeout未解决问题，相关代码如下：

前端原代码 #

const [urlImagen, setUrlImagen] = useState(auth.imagen)

try {
    // Eliminar avatar anterior de Cloudinary
    const timestamp = new Date().getTime();
    const signature = generateSHA1(`public_id=${process.env.CLOUDINARY_UPLOAD_PRESET}/${usuarioID}&timestamp=${timestamp}${process.env.CLOUDINARY_API_SECRET}`);

    const cloudinaryResponse = await clienteAxios.post(`https://api.cloudinary.com/v1_1/${process.env.CLOUDINARY_CLOUD_NAME}/image/destroy`, {
        public_id: `${process.env.CLOUDINARY_UPLOAD_PRESET}/${usuarioID}`,
        signature: signature,
        api_key: process.env.CLOUDINARY_API_KEY,
        timestamp: timestamp
    });

    if (imagen) {
        // Subir nuevo avatar a Cloudinary
        const image = new FormData()
        image.append('file', imagen)
        image.append('upload_preset', process.env.CLOUDINARY_UPLOAD_PRESET)
        image.append('public_id', usuarioID)

        const response = await clienteAxios.post(`https://api.cloudinary.com/v1_1/${process.env.CLOUDINARY_CLOUD_NAME}/image/upload`, image)
        setUrlImagen(response.data.secure_url)
    }

    const fechaNacimiento = `${dia.toString().padStart(2, '0')}-${mes.toString().padStart(2, '0')}-${year.toString()}`;

    const datosActualizados = {
        nombre,
        apellido,
        usuarioID,
        email,
        descripcion,
        fechaNacimiento,
        imagen: urlImagen
    };

    const { data } = await clienteAxios.put(`/usuarios/perfil/${auth._id}`, datosActualizados)

    setAlertaVisible(true)
    setAlerta({
        msg: data.msg,
        error: false,
    })
    setTimeout(() => {
        setAlertaVisible(false)
    }, 3000);
} catch (error) {
    console.log(error)
    setAlertaVisible(true)
    setAlerta({
        msg: error.response.data.msg,
        error: true,
    })
}

后端原代码 #

const editarPerfil = async (req, res, next) => {
    const { nombre, apellido, email, descripcion, fechaNacimiento, usuarioID, imagen } = req.body;
  
    try {
        console.log(imagen)
        // Busca el usuario por su ID y actualiza los campos correspondientes
        let usuarioActualizado = await Usuario.findByIdAndUpdate(req.params.id,
            {
                nombre,
                apellido,
                email,
                descripcion,
                fechaNacimiento,
                usuarioID,
                imagen        
            },
            { new: true } // Devuelve el usuario actualizado
        );
        
        res.json({ msg: "Perfil actualizado correctamente", visible: true, usuarioActualizado });
    } catch (err) {
        console.log(err);
        const error = new Error("Error al editar el perfil del usuario")
        res.status(500).json({ msg: error.message, visible: true });
    }
};

问题原因 #

React的setState是异步操作，调用setUrlImagen(response.data.secure_url)后，urlImagen不会立即更新。此时构造datosActualizados时，imagen字段取到的还是更新前的旧值，导致首次提交给后端的URL不正确。第二次提交时，状态已经完成更新，所以能传对值。

解决方案 #

无需依赖状态值，直接使用Cloudinary返回的URL来构造请求数据。如果没有上传新图片，则沿用原来的urlImagen状态值。

修改后的前端代码 #

const [urlImagen, setUrlImagen] = useState(auth.imagen)

try {
    // Eliminar avatar anterior de Cloudinary
    const timestamp = new Date().getTime();
    const signature = generateSHA1(`public_id=${process.env.CLOUDINARY_UPLOAD_PRESET}/${usuarioID}&timestamp=${timestamp}${process.env.CLOUDINARY_API_SECRET}`);

    const cloudinaryResponse = await clienteAxios.post(`https://api.cloudinary.com/v1_1/${process.env.CLOUDINARY_CLOUD_NAME}/image/destroy`, {
        public_id: `${process.env.CLOUDINARY_UPLOAD_PRESET}/${usuarioID}`,
        signature: signature,
        api_key: process.env.CLOUDINARY_API_KEY,
        timestamp: timestamp
    });

    // 存储新的图片URL（如果有上传）
    let nuevaUrlImagen = urlImagen;
    if (imagen) {
        // Subir nuevo avatar a Cloudinary
        const image = new FormData()
        image.append('file', imagen)
        image.append('upload_preset', process.env.CLOUDINARY_UPLOAD_PRESET)
        image.append('public_id', usuarioID)

        const response = await clienteAxios.post(`https://api.cloudinary.com/v1_1/${process.env.CLOUDINARY_CLOUD_NAME}/image/upload`, image)
        nuevaUrlImagen = response.data.secure_url;
        setUrlImagen(nuevaUrlImagen); // 依然更新状态，用于后续页面展示
    }

    const fechaNacimiento = `${dia.toString().padStart(2, '0')}-${mes.toString().padStart(2, '0')}-${year.toString()}`;

    const datosActualizados = {
        nombre,
        apellido,
        usuarioID,
        email,
        descripcion,
        fechaNacimiento,
        imagen: nuevaUrlImagen // 直接用刚获取的新URL，而非异步更新的状态
    };

    const { data } = await clienteAxios.put(`/usuarios/perfil/${auth._id}`, datosActualizados)

    setAlertaVisible(true)
    setAlerta({
        msg: data.msg,
        error: false,
    })
    setTimeout(() => {
        setAlertaVisible(false)
    }, 3000);
} catch (error) {
    console.log(error)
    setAlertaVisible(true)
    setAlerta({
        msg: error.response.data.msg,
        error: true,
    })
}

说明 #

• 新增变量nuevaUrlImagen，默认沿用旧状态值，上传新图片后直接赋值Cloudinary返回的URL，避免异步状态更新的延迟问题。
• 依然保留setUrlImagen用于更新页面展示的状态，不影响前端UI渲染。
• 后端代码无需修改，即可正确接收首次提交的头像URL。

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