Estoy tratando de crear un componente funcional de React usando Typescript que obtendrá datos de una API y luego enviará esos datos a otro componente, sin embargo, recibo un error de "Error: demasiados renderizados. React limita el número de renderizados para evitar un bucle infinito".
¡Por favor, ofrezca algún consejo!
useEffect(() => { await axios.get('https://quote-garden.herokuapp.com/api/v3/quotes/random').then((resp) => { setQuote1(resp.data.data[0]); }); getQuote(); }, []);Fragmento de código que causa el error
EDITAR: Aquí está el archivo completo donde se produce el error.
import React, { useEffect, useState } from 'react'; import { Row, Col, CardGroup } from 'reactstrap'; import axios from 'axios'; import QuoteCard from './QuoteCard'; const MainQuotes = () => { const [quote1, setQuote1] = useState(); useEffect(() => { await axios.get('https://quote-garden.herokuapp.com/api/v3/quotes/random').then((resp) => { setQuote1(resp.data.data[0]); }); getQuote(); }, []); return ( <Row> <Col> <CardGroup> <QuoteCard quoteData={quote1} /> </CardGroup> </Col> </Row> ); }; export default MainQuotes;Dependiendo del tipo de cita1 (supongo que es una cadena), actualice a:
const [quote1, setQuote1] = useState('') useEffect(() => { function fetchQuote() { await axios.get('https://quote-garden.herokuapp.com/api/v3/quotes/random') .then((resp) => { setQuote1(resp.data.data[0]); }); } if (!quote1) { fetchQuote(); } }, []); Debido a que la respuesta de la API es una cotización aleatoria, debe manejarla en función del valor de cotización1. Esto debería funcionar porque quote1 solo se actualizará después de que se monte el componente (cuando el valor es una cadena vacía), y el siguiente procesamiento no actualizará el estado, por lo que useEffect no se repetirá infinitamente.
Antes de la edición, supuse que la solicitud de axios estaba dentro de la función getQuote. He actualizado mi respuesta para reflejar el código que ha publicado.
Si la respuesta de la API fue estática, debido a que los elementos en la matriz de dependencias solo causan una nueva representación si se cambia su valor actual, solo provoca una nueva representación inmediatamente después de la primera actualización de estado.
¿Podemos obtener su código completo, por favor? Parece que el problema va a ser con tu gancho de estado y averiguar exactamente qué está haciendo.
Supongo que a partir de ahora su enlace de estado "setQuote1" se está invocando de una manera que provoca una nueva representación, que luego invocaría su useEffect() nuevamente (ya que useEffect se ejecuta al final del ciclo de representación) y, por lo tanto, llamando sobre su gancho setQuote1 nuevamente. Esto se repite indefinidamente.
useEffect() permite dependencias y le da el poder de decir exactamente cuándo se debe invocar useEffect().
Ejemplo: useEffect(() { código aquí }, [VER ESPECÍFICAMENTE ESTO Y EJECUTAR SOLO CUANDO ESTO SE ACTUALICE]).
Cuando deja la matriz de dependencia vacía, le dice al enlace que se ejecute cada vez que CUALQUIER COSA actualice el estado. Esto no es necesariamente malo, pero en algunos casos solo desea que su useEffect() se ejecute cuando se actualiza un estado específico.
Algo en su aplicación debe estar activando su gancho useEffect() para que se ejecute cuando no lo desea.