Estoy haciendo una solicitud de obtención a una API en un useEffect(). Cuando navego a la página desde la página de inicio, se carga bien, pero tan pronto como actualizo la página http://localhost:3000/coins/coin , aparece un Error de tiempo de Unhandled Runtime Error: Error: Network Error .
export async function getServerSideProps({ query }) { const id = query; return { props: { data: id }, }; } function index({ data }) { const coinURL = data.id; // bitcoin const apiEndpoint = `https://api.coingecko.com/api/v3/coins/${coinURL}`; const [currentUser, setCurrentUser] = useState(); const [coinData, setCoinData] = useState([]); useEffect(() => { const getData = async () => { const res = await axios.get(apiEndpoint); const { data } = res; setCoinData(data); }; const getCurrentUser = async () => { const res = await axios.get( `http://localhost:5000/api/users/${session?.id}` ); const { data } = res; setCurrentUser(data); }; getData(); getCurrentUser(); }, [coinData, currentUser]); }¿Por qué pasó esto?
Recomiendo hacer algo como esto:
const getData = async () => { try { const res = await axios.get(apiEndpoint); const { data } = res; setCoinData(data); } catch(err) { console.log(err) } }; const getCurrentUser = async () => { try { const res = await axios.get( `http://localhost:5000/api/users/${session?.id}` ); const { data } = res; setCurrentUser(data); } catch(err) { console.log(err) } }; useEffect(() => { getData(); getCurrentUser(); }, [coinData, currentUser]);si lo hace, podrá ver el error exacto y solucionarlo.