Tengo un problema con la obtención de datos dentro de un useEffect(). Puedo ver en la herramienta de desarrollo que la búsqueda se llama en un bucle infinito.
Soy bastante nuevo en React, así que tal vez este sea un problema simple. He intentado buscar a otros con los mismos problemas, pero parece que no puedo hacer una conexión con mi código.
El código está debajo.
export function Category(){ const [categories, setCategories] = useState([]); useEffect(() => { fetch('https://localhost:5001/api/Category') .then(response => response.json()) .then(data => setCategories(data)); return () => { } }) const renderCategories = (cats) => { return ( <Table ClassName= "mt-4" striped bordered hoved size= "=sm"> <thead> <tr> <th> Id: </th> <th> Category Name: </th> <th> Options </th> </tr> </thead> <tbody> {cats.map(cats=> <tr key = {cats.categoryId}> <td> {cats.categoryId}</td> <td> {cats.name}</td> </tr>)} </tbody> </Table> ) } return( <div> {renderCategories(categories)} </div> ) }useEffect se llama cada vez que cambia state . En su código, llama a setCategories dentro de useEffect para cambiar el estado de las categories . Esa acción desencadena el propio useEffect en un bucle infinito.
Este es un problema común para las personas nuevas que aprenden React 17 con ganchos o incluso para los antiguos desarrolladores de React Class. Para evitar esto, usar corchetes [] como @Chris G está bien por ahora, pero no es una buena práctica al escalar porque solo engañas a React para que ejecute useEffect una vez.
Dan Abramov recomienda usar useReducer para administrar el estado fuera de useEffect . Este es su excelente artículo que explica cada rincón de useEffect . Sirvamos un poco de café y leámoslo porque es tan largo como un libro: https://overreacted.io/a-complete-guide-to-useeffect/