Así que hice un gancho personalizado para buscar y estoy tratando de usar ese gancho y filtrar algunas cosas usando mis parámetros. Pero la recuperación devuelve indefinido en primer lugar, lo que en realidad rompe mi código.

Código de gancho personalizado

 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} }

Código donde estoy tratando de usar la búsqueda

 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 => parseInt(person.login.uuid) === parseInt(id)) console.log(newPerson) setPerson(newPerson) }, []) return ( <div> Testing </div> ) } export default PersonDetails