¿Por qué tengo indefinido en el usuario seleccionado? Después de todo, paso por el método de búsqueda a través de la matriz de usuarios y la primera identificación de la matriz de usuarios debe escribirse en el usuario seleccionado
function App() { const [selectedUserId, setSelectedUserId] = useState(null) const [users,setUsers] = useState([]) const selectedUser = users.find(u => u.id === selectedUserId) console.log(users) console.log(selectedUser) useAsyncEffect(async () => { const res = await fetch('https://jsonplaceholder.typicode.com/users') const data = await res.json() setUsers(data) }, []) const onUserClick = (userId) => { setSelectedUserId(userId) } return ( <div> { selectedUser ? <ListUsers users={users} onUserClick={onUserClick} /> : <Profile user= {selectedUser} /> } </div> ) }Puede usar un estado de carga para determinar cuándo se realiza la función asíncrona y solo entonces puede configurar el usuario seleccionado. De lo contrario, permanece establecido en 'nulo' cuando se representa el 'retorno'.
A continuación se muestra el pseudo código.
function App() { const [selectedUserId, setSelectedUserId] = useState(null) const [users,setUsers] = useState([]) const selectedUser = users.find(u => u.id === selectedUserId) const [loading, setLoading] = useState(false) console.log(users) console.log(selectedUser) useAsyncEffect(async () => { setLoading(true) const res = await fetch('https://jsonplaceholder.typicode.com/users') const data = await res.json() setUsers(data) setLoading(false) }, []) const onUserClick = (userId) => { setSelectedUserId(userId) } if (loading){ return "Loading..." // you can use a nicer loader component here } return ( <div> { selectedUser ? <ListUsers users={users} onUserClick={onUserClick} /> : <Profile user= {selectedUser} /> } </div> ) }