Tengo una base de datos Supabase llamada subprocesos con 5 entradas, estoy tratando de crear un nuevo componente React para cada columna en la base de datos, pero tengo algunos problemas.
El problema que me está dando es que está deteniendo el programa para evitar un bucle infinito, supongo que esto se debe a que en mi código estoy actualizando mi estado de uso cada vez que renderizo mi Componente del que soy consciente, pero no lo estoy. seguro de cómo solucionaría este problema.
Componente.js:
import {useState} from "react"; import {supabase} from "../../utils/supabaseClient"; export default function Sidebar() { const [newThreads, setNewThreads] = useState([]); // this is where I am kinda stuck const threadList = []; (async () => { let {data: threads, error} = await supabase .from('threads') .select('thread_title'); threadList.push(threads); // how do I get the current index of the loop (and limit it to only get 5 entries?) threadList.forEach(function (value) { console.log(value) }) })(); setNewThreads(threadList); return ( <div className="sidebar"> <div className="sidebar-widget"> <span className="widget-title">New Threads</span> </div> <div className="sidebar-widget"> <span className="widget-title">New Members</span> {(Object.entries(newThreads) || []).map(([key, value]) => { return ( <div className="widget-cell"> <div className={"widget-cell-image"}/> <div className="widget-cell-content"> <span className={"widget-cell-title"}>{value}</span> <div className="widget-cell-values"> <span className={"widget-cell-by-user"}>by harley_swift,</span> <span className={"widget-cell-time"}>22:02</span> </div> </div> </div> ); })} </div> </div> ) }¡Cualquier ayuda con una explicación sería muy apreciada!
La forma de evitar el problema de la reproducción infinita es usar useEffect para obtener sus datos:
useEffect(() => { // this is where I am kinda stuck const threadList = []; (async () => { let { data: threads, error } = await supabase .from('threads') .select('thread_title'); threadList.push(threads); // how do I get the current index of the loop (and limit it to only get 5 entries?) threadList.forEach(function(value) { console.log(value) }) })(); setNewThreads(threadList); }, []); // note the empty dependency listLa lista de dependencias vacía es una de las formas en que sabe que el efecto solo se ejecutará una vez.
Para agregar solo 5 de los elementos a la lista, puede dividir el resultado (o verificar si supabase tiene una forma integrada de hacerlo):
threadList.push(threads.slice(0, 5));Finalmente, tenga en cuenta que los cambios de estado son asincrónicos y más en su caso porque en realidad está realizando una recuperación a través de la red.
Si desea recibir una notificación cuando se newThreads , puede usar otro useEffect así:
useEffect(() => { if (newThreads) { console.warn(newThreads.length); } }, [newThreads]); La declaración if no es realmente necesaria, pero se agregó para completar
Esto también se aplica cuando desea renderizar newThreads , necesita usar el renderizado condicional para hacer eso:
{ (Object.entries(newThreads) || []).map(([key, value]) => { return ( <div className="widget-cell"> <div className={"widget-cell-image"} /> <div className="widget-cell-content"> <span className={"widget-cell-title"}>{value}</span> <div className="widget-cell-values"> <span className={"widget-cell-by-user"}>by harley_swift,</span> <span className={"widget-cell-time"}>22:02</span> </div> </div> </div> ); }) || <div>Loading...</div> }