Estoy tratando de obtener una API en un enlace personalizado de reactjs usando Axios. Sigo obteniendo el doble de respuesta como indefinido y luego el doble como una recuperación exitosa con los datos. El indefinido rompe mi aplicación.

Por cierto, estoy obteniendo de la API de usuario aleatorio.

 import axios from "axios"; import { useState, useEffect } from "react" export const useFetch = (url) => { const [loading, setLoading] = useState(false); const [data, setData] = useState([]); const [error, setError] = useState('') const getData = () => { setLoading(true) try { axios.get(url) .then(response => setData(response.data)); setLoading(false) } catch (error) { setError(error) } }; useEffect(() => { getData() }, [url]) return {loading, data, error} }

Tratando de usarlo aquí y mapearlo

 import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import { useFetch } from '../custom_hooks/useFetch'; const PersonDetails = () => { const { loading, data , error } = useFetch('https://randomuser.me/api?results=20'); const { results } = data; const { id } = useParams(); const [person, setPerson] = useState({}) useEffect(() => { const newPerson = results?.find(person => person.login.uuid === parseInt(id)) setPerson(newPerson) console.log(newPerson) }, []) return ( <div> {person.name.first} </div> ) } export default PersonDetails

Esto es lo que realmente estoy tratando de hacer, pero ahora, debido a que no está definido, me sale que no puede leer las propiedades de undefined...