Este es mi código que envía una solicitud GET a mi servidor (mySQL) y obtiene los datos. Estoy usando useState para extraer y configurar response.data.
const baseURL = 'http://localhost:5000/api/user/timesheet/13009'; const [DataArray , setDataArray] = useState([]); axios.get(baseURL).then( (response)=>{ setDataArray(response.data); });Pero useState sigue enviando la solicitud GET a mi servidor y solo quiero volver a enviar la solicitud GET y volver a procesarla cuando hago clic en un botón o ejecuto otra función.
Consola de terminal de servidor
¿Existe una mejor manera de almacenar los datos de respuesta y, si no, cómo puedo detener la reproducción automática de useState y hacer que se vuelva a procesar solo cuando yo quiera?
Como se señaló en los comentarios, su llamada setState está desencadenando una nueva representación que, a su vez, está realizando otra llamada axios, creando efectivamente un bucle sin fin.
Hay varias formas de solucionar esto. Podría, por ejemplo, usar una de las muchas bibliotecas creadas para la gestión de consultas con ganchos de reacción, como reaccionar-consulta. Pero el enfoque más sencillo sería emplear useEffect para envolver su consulta.
Por cierto, también debe sacar constantes como baseUrl del componente, de esa manera no necesitará incluirlas como dependencias para el efecto.
const baseURL = 'http://localhost:5000/api/user/timesheet/13009'; const Component = () => { const [dataArray , setDataArray] = useState([]); useEffect(() => { axios.get(baseURL).then( (response)=>{ setDataArray(response.data); }); }, []); // your return code }Esto solo ejecutaría la consulta en la primera carga.
tienes que envolver tu solicitud en un useEffect.
const baseURL = 'http://localhost:5000/api/user/timesheet/13009'; const [DataArray , setDataArray] = useState([]); React.useEffect(() => { axios.get(baseURL).then((response)=>{ setDataArray(response.data); }) }, [])La matriz de dependencia vacía dice que su solicitud solo se activará una vez (cuando se monte el componente). Aquí está la documentación sobre el useEffect
Agregue el código a una función y luego llame a esa función desde el detector onClick del botón o desde la otra función. No necesita useEffect porque no desea obtener datos cuando el componente se procesa por primera vez, solo cuando lo desee.
function getData() { axios.get(baseURL).then(response => { setDataArray(response.data); }); } return <button onClick={getData}>Get data</button> // Or function myFunc() { getData(); }