Soy bastante nuevo en React. Actualmente tengo el problema de que estoy usando la respuesta de solicitud Axios Get para actualizar una de mis variables de estado.
Sin embargo, actualmente me enfrento al problema en el que debido a que la variable de estado se está actualizando, la aplicación se vuelve a procesar, lo que luego vuelve a llamar a la solicitud Axios Get (lo que provoca una especie de bucle infinito).
¿Cómo hago para que una solicitud Get pueda cambiar una variable, pero no vuelva a procesar el componente y vuelva a llamar a una solicitud Get?
function App(props) { let [sentenceData, setSentenceData] = React.useState({}) const renderEnglishSentence = useCallback(function () { return <EnglishSentence sentenceData={sentenceData}/>; }, [sentenceData]); const fetchSentence = useCallback(function() { return axios.get('http://localhost:3030/getrandomunusedsentence') }) fetchSentence().then((response) => setSentenceData(response.data[0]) return ( <div> {renderEnglishSentence()} </div> ) ) }Querrás usar el gancho useEffect para esto. Esto solo renderizará la primera vez que se cargue el componente.
import React, { useState, useEffect } from 'react'; function App(props) { useEffect(() => { const fetchSentence = useCallback(function() { return axios.get('http://localhost:3030/getrandomunusedsentence') }) }, []); } const [sentenceData, setSentenceData] = React.useState({}) React.useEffect(() => { axios.get('http://localhost:3030/getrandomunusedsentence') .then(() => { setSentenceData(response.data[0]) }) }, [])Puede realizar la solicitud http en el gancho useEffect con cero dependencias ([])
Las llamadas a API deben manejarse como un efecto secundario. Debe usar useEffect hook para él sin dependencias, por lo que se llamará una vez que se monte el componente.
useEffect(() => { const fetch = async () => { const response = await axios.get('http://localhost:3030/getrandomunusedsentence'); const data = await response.json(); setSentenceData(data); } fetch(); }, []);