import React from 'react' import axios from "axios" import { useEffect } from "react" import { useState } from "react" export function Profile (){ const pathname = window.location.pathname const[data,setData] = useState([]) const [loaded,hasloaded] = useState(false) let username = pathname.split("/")[1] useEffect(()=>{ axios.post('http://localhost:5000/profile/getProfile', { "username":username }) .then((res)=> setData(res.data)) }) return ( <div className='Wrapper'> <img/> {loaded ? <h2>{data[0].username}</h2>:<h2>Loading</h2>} <img /> </div> ) }axios tarda como 10 segundos en obtener la respuesta es esto normal? cuando lo solicito al cartero tarda como 1 segundo. Además, ¿cómo puedo renderizar cuando he recibido los datos sin causar muchos renderizados?
Cuando la matriz de dependencia para useEffect no está undefined (en lugar de una matriz vacía), el efecto se ejecuta en cada representación . Y dentro de su useEffect está actualizando el estado, lo que activará una nueva representación. Esto significa que cada renderizado activa un nuevo renderizado.
Parece que solo desea que el efecto se ejecute una vez, cuando el componente se carga por primera vez. Para eso, pase una matriz de dependencias vacía a useEffect :
useEffect(()=>{ axios.post('http://localhost:5000/profile/getProfile', { "username":username }) .then((res)=> setData(res.data)) }, []); // <--- here