0
275
Views¿Por qué tengo un bucle en mi aplicación de reacción?
Estoy aprendiendo React y estoy creando mi aplicación para probar la biblioteca, pero tengo un bucle extraño y no sé de dónde viene.
Mi código :
import React, {useEffect, useState} from 'react'; import Navigation from "../components/Navigation"; import axios from "axios"; import Card from "../components/Card"; import {randomNumber} from "../components/_helper"; const Home = () => { console.log('coucou') const [randomCharacters, setRandomCharacters] = useState([]); const [totalCharacters, setTotalCharacters] = useState(''); const [randomNumbers, setRandomNumbers] = useState(''); useEffect(() => { axios.get('https://rickandmortyapi.com/api/character') .then((response) => { setTotalCharacters(response.data.info.count) }) }) useEffect(() =>{ axios.get('https://rickandmortyapi.com/api/character/1,23,45,654,21,12') .then((response) => { response.data.map(() => ( setRandomCharacters(response.data) )) }) }) return ( <div> <Navigation/> {randomCharacters.map( (character) => ( <Card key={character.id} character={character}/> ))} </div> ); }; export default Home;Como puede ver, hice un console.log al comienzo de mi código y no tengo escritura de bucle (for, foreach), pero esto es lo que sucede en la consola:
No entiendo este comportamiento, ¿alguien que me explique dónde hice mal?
1 answers
Answer question0
Sus 2 useEffect s se ejecutan cada vez que se vuelve a procesar.
En su useEffect , actualiza las variables de estado randomCharacters y totalCharacters . Luego, se vuelve a procesar cada vez que sus API devuelven datos diferentes debido a estas actualizaciones de estado.
Entonces su aplicación se repite infinitamente.
Al menos necesita agregar una dependencia más. Pero en su caso, puede pasar la dependencia vacía [] para una llamada API única.
Aquí hay un consejo del documento oficial de React. Si desea ejecutar un efecto y limpiarlo solo una vez (al montar y desmontar), puede pasar una matriz vacía ([]) como segundo argumento. Esto le dice a React que su efecto no depende de ningún valor de accesorios o estado, por lo que nunca necesita volver a ejecutarse. Esto no se maneja como un caso especial: se deriva directamente de cómo funciona siempre la matriz de dependencias.
El código debe tener el siguiente aspecto:
useEffect(() => { axios.get('https://rickandmortyapi.com/api/character') .then((response) => { setTotalCharacters(response.data.info.count) }) }, []) useEffect(() =>{ axios.get('https://rickandmortyapi.com/api/character/1,23,45,654,21,12') .then((response) => { response.data.map(() => ( setRandomCharacters(response.data) )) }) }, [])