Escribí un código que recibe la API a través de React Hook y vuelve a llamar a la API en el componente secundario pasando la identificación al hacer clic. Sin embargo, parece haber un problema al establecer el estado con la función de flecha en useEffect o onClick del componente secundario.
Agradecería si pudieras darme una respuesta sobre cómo solucionarlo.
Usuarios.js
import axios from 'axios'; import React, { useState, useEffect } from 'react'; import UserInfo from './UserInfo'; function Users() { const [users, setUsers] = useState(null) const [loding, setLoding] = useState(false) const [error, setError] = useState(false) const [userId, setUserId] = useState(null) const fetchUsers = async () => { try { setUsers(null) setError(null); setLoding(true) const respnse = await axios.get('https://jsonplaceholder.typicode.com/users') setUsers(respnse) } catch (e) { setError(e) } setLoding(false) }; useEffect(() => { fetchUsers(); }, []); if (loding) return <div>loading...</div> if (error) return <div>error....</div> if (!users) return null; return ( <> <ul> { users.data.map(user => <li key={user.id} onClick={() => setUserId(user.id)} > {user.username} ({user.name}) </li> ) } </ul> <button onClick={fetchUsers}> reload </button> {userId && <UserInfo id={userId} />} </> ); } export default Users;UserInfo.js
import React, { useEffect, useState } from 'react'; import axios from 'axios'; function UserInfo({ id }) { const [userInfo, setUserInfo] = useState(null) async function getUsersAPI() { try { const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`) setUserInfo(response) } catch (e) { } } useEffect(() => { getUsersAPI() }, [userInfo]) if (!userInfo) { return null; } const { data } = userInfo return ( <> <h2>{data.username}</h2> <p> <b>email: </b>{data.email} </p> </> ); } export default UserInfo;Parece que desea que la id sea una dependencia de useEffect en lugar de userInfo.
De lo contrario, cada vez que userInfo cambie, el efecto se ejecutará, llamará a getUsersAPI , que a su vez establece el valor de userInfo cuando se resuelve axios (provocando así un bucle infinito).
import React, { useEffect, useState } from 'react'; import axios from 'axios'; function UserInfo({ id }) { const [userInfo, setUserInfo] = useState(null) async function getUsersAPI() { try { const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`) setUserInfo(response) } catch (e) {} } useEffect(() => { getUsersAPI() }, [id]) if (!userInfo) { return null; } const { data } = userInfo return ( <> <h2>{data.username}</h2> <p> <b>email: </b>{data.email} </p> </> ); } export default UserInfo;¡este problema se debe al hecho de que ha establecido userInfo como una dependencia para la matriz de dependencia useEffect ! cada vez que este componente se procesa, useEffect llamará a su API y cambiará el valor de userInfo, ¡así que se encontrará con un bucle infinito!
El problema está en el archivo UserInfo.js. En estas lineas:
useEffect(() => { getUsersAPI() }, [userInfo]) Obtiene la información del usuario pero luego setUserInfo(response) nuevamente, lo que hace que useEffect se ejecute nuevamente.
Si es posible que desee dejarlo como:
useEffect(() => { getUsersAPI() }, [])Entonces useEffect solo se ejecuta una vez. O desea que refleje su último ID de usuario de accesorios y luego coloque el ID de usuario en la matriz de dependencia:
useEffect(() => { getUsersAPI() }, [id])