Tengo un editor de página simple. Cuando un usuario hace clic en editar página, abre un editor. Estoy pasando la ID de la página usando redux que se usará para obtener datos de la API.
Aquí está mi Redactor.
const [pageData, setPageData] = useState(""); const getPage = async (id) => { try { const response = await api.get(`/landing_pages/${id}`); console.log("page", response.data); // displays data at the end setPageData(response.data); } catch (error) { console.log(error); } }; useEffect(() => { getPage(pageID); console.log('Page Data', pageData) // displays nothing let LandingPage = pageData; const editor = grapesjs.init({ container: "#editor", components: LandingPage.components || LandingPage.html, }) }, [pageID, getPage])¿Por qué los datos de la página no muestran nada a pesar de que los datos de la API se devuelven y se muestran en la consola al final? ¿Qué estoy haciendo mal aquí?
Incluso si await su llamada getPage , los pageData de página actualizados no estarán disponibles hasta el siguiente ciclo de procesamiento, por lo que su asignación a LandingPage estará un ciclo atrás.
En su lugar, debe actualizar en un useEffect y observar los cambios en pageData en otro.
const [pageData, setPageData] = useState(""); useEffect(() => { const getPage = async (id) => { try { const response = await api.get(`/landing_pages/${id}`); console.log("page", response.data); // displays data at the end setPageData(response.data); } catch (error) { console.log(error); } }; getPage(pageID); }, [pageID]); useEffect(() => { console.log('Page Data', pageData); // displays updated pageData let LandingPage = pageData; const editor = grapesjs.init({ container: "#editor", components: LandingPage.components || LandingPage.html, }); }, [pageData]);