0
180
VistasUso de Promise al extraer datos de Supabase a React
Tengo una función asíncrona que obtiene datos de mi base de datos Supabase, que cuando se llama, devuelve una promesa con los datos correctos que he consultado, pero cuando intento llamar a esta función en un componente React, no sé cómo extraer los datos de la Promesa y solo obtuve la cadena que consulté.
Entiendo que no se puede obtener el resultado de una promesa en el mismo ámbito que usted la llama, pero no estoy seguro de cómo solucionar esto.
Mi código:
export async function getUserValue(uuid, value) { const { data, error } = await supabase .from('users') .select('username').eq("id", "8f1693d3-c6d9-434c-9eb7-90882ea6ef28"); // hard coded values for testing purposes return data; }Donde lo llamo:
... async function Sidebar(props) { console.log(getUserValue("", "")) return ( <div className={"sidebar"}> <div className="sidebar-main"> <img className={"sidebar-main-picture"} src={profile_picture} alt="pfp"/> <p className={"sidebar-main-name"}>Test</p> ... Resultado 
1 Respuestas
Responde la pregunta0
La forma de almacenar datos en los componentes de React es definir y establecer el estado .
El lugar correcto para manejar los efectos secundarios, como los datos de respuesta asíncrona, es un gancho de efectos .
import { useEffect, useState } from "react"; function Sidebar(props) { const [ user, setUser ] = useState(null); // initial value useEffect(() => { getUserValue("", "") .then(users => { setUser(users[0]) // your response is an array, extract the first value }) .catch(console.error) }, []); // empty array means run this once on mount return user && ( // only display if `user` is set <p>Hello, { user.username }</p> {/* just an example */} ); }Siento que esto definitivamente se ha preguntado y respondido antes, pero no pude encontrar un duplicado aplicable. Feliz de eliminar esto o marcarlo Community Wiki si alguien puede vincular una publicación existente.