Hola chicos, estoy tratando de obtener datos usando get, y quiero que los datos se muestren después de hacer clic en el botón, como una basura normal, soy nuevo en la programación si hay alguien que pueda ayudarme. APRECIO GRACIAS todo en mi backend está bien, lo intento en postman y console.log está todo bien. Mi problema es solo en esta parte gracias
import { useState, useEffect } from "react"; import axios from "axios"; function Usuarios() { const [users, setUsers] = useState([]); useEffect(()=> { const todosUsers = async () => { const res= await axios.get("/users"); console.log(res) setUsers(res.data); } todosUsers() },[]) return ( <> <button onClick= {users.map((users) => ( <h1>{users.username}</h1> ))}></button> </> ) } export default Usuarios;una solución sería mantener una variable separada para ver si se hace clic en el botón como mencionó S. Singh
const [users, setUsers] = useState([]); const [clicked, setClicked] = useState(false); y en su componente puede establecer la variable en la que se clicked en true al hacer clic
return ( <> <button onClick={() => setClicked(true)}></button> //setting clicked true onclick {clicked && users.map((users) => ( //only renders when click is true <h1>{users.username}</h1> ))} </> ) si desea ocultar y mostrar alternativamente al hacer clic, simplemente cambie la línea a onClick={() => setClicked(!clicked)}
Muevete
{users.map((users) => ( <h1>{users.username}</h1> )) }de la definición onClick y colóquelo en un marcado donde desee que se represente. Defina onClick hendler, que configurará datos de una API a un estado
import { useState, useEffect } from "react"; import axios from "axios"; function Usuarios() { const [users, setUsers] = useState([]); const fetchOnClick = async () => { await axios.get("/users"); console.log(res) setUsers(res.data); } return ( <> <button onClick={fetchOnClick}> Fetch </button> <div> {users.map((users) => ( <h1>{users.username}</h1> ))} </div> </> ) }O
Si desea obtener los datos dentro del gancho useEffect, como lo hizo en su ejemplo
import React, { useState, useEffect } from "react"; function Usuarios() { const [users, setUsers] = useState([]); const [isContainerShowed, setIsContainerShowed] = useState(false) useEffect(() => { const res= await axios.get("/users"); console.log(res) setUsers(res.data); }, []) const displayContainer = () => setIsContainerShowed(true); return ( <> <button onClick={displayContainer}> Fetch </button> <div style={{display: isContainerShowed ? "block" : "none"}}> {users.map(users => <h1>{users.username}</h1>)} </div> </> ) }use Effect hook se ejecuta cada vez que se procesa el componente pero, según tengo entendido, desea mostrar a los usuarios cuando se hace clic en el botón, para que pueda buscar usuarios una vez que se hace clic en el botón y mostrarlos usando el código a continuación
import { useState, useEffect } from "react"; import axios from "axios"; function Usuarios() { const [users, setUsers] = useState([]); const fetchUsers= async () => { const res= await axios.get("/users"); setUsers(res.data); } return ( <> <button onClick={() => fetchUsers()}></button> { users.length && users.map(user => <h2>{user.username}</h2>) } </> ) }