Estoy publicando una imagen en mi cuenta de Cloudinary y quiero guardar la URL de la respuesta en el estado imageUrl . Cuando la consola registra la URL de respuesta, me muestra la URL de Cloudinary correctamente, pero parece que setImageUrl no funciona.
He cambiado mis datos de Cloudinary a 'ficticio' por razones de seguridad
import React, { useState } from "react"; import "./image.css"; function Image() { const [image, setImage] = useState(""); const [imageUrl, setImageUrl] = useState(""); const postDetails = async () => { const data = new FormData(); data.append("file", image); data.append("upload_preset", "dummy"); data.append("cloud_name", "dummy"); const settings = { method: "POST", body: data }; try { const fetchData = await fetch( "https://api.cloudinary.com/v1_1/dummy/image/upload", settings ); const resData = await fetchData.json(); console.log(resData.url); if (resData) { setImageUrl(resData.url); console.log("imageUrl", imageUrl); } } catch (e) { console.log(e); } }; return ( <> <div className="file-field input-field"> <div className="btn #64b5f6 blue darken-1"> <span>Uplaod Image</span> <input type="file" onChange={(e) => setImage(e.target.files[0])} /> </div> <div className="file-path-wrapper"> <input className="file-path validate" type="text" /> </div> </div> <button className="btn waves-effect waves-light #64b5f6 blue darken-1" onClick={() => postDetails()} > Submit post </button> </> ); } export default Image;Veo que en general no hay nada malo con la lógica. Compruebe si if (resData) es realmente un valor true . ¡Puedes hacerlo así para estar más seguro del valor !! resdata o Boolean (resData) , pero tenga en cuenta que un objeto vacío o una matriz vacía será un valor real.
Si no hay ningún error en la instrucción try catch y restData es un valor verdadero, no hay posibilidad de que setImageUrl () no funcione.
La actualización de estado ocurre de forma asincrónica , por lo que cuando llama a la función de actualización de estado setImageUrl , el estado no se actualiza de inmediato, primero se ejecuta toda la función postDetails y luego se vuelve a procesar (lo que significa que su componente funcional se vuelve a llamar) y esto vez que el useState devolverá el valor actualizado para el estado imageUrl .
Entonces, su lógica es correcta, en el siguiente renderizado obtendrá el valor actualizado que puede usar en su JSX, pero su expectativa de que el registro imprima el estado actualizado inmediatamente después de que se llame al actualizador de estado es incorrecta.
Además, en una nota al margen, no necesita crear una nueva función para pasarla a onClick de esta manera: onClick={() => postDetails()} , simplemente puede pasar la función postDetails de esta manera: onClick={postDetails} porque no desea pasar ningún argumento a la función, por lo que no es necesario crear una nueva función.