import { Input, Box, Text, Divider, Button } from '@chakra-ui/react'; import { useState } from 'react'; export default function SearchGithub() { const [username, setUsername] = useState(''); const [data, setData] = useState({}); async function handleGithubSearch() { await fetch('/api/github', { method: 'POST', body: JSON.stringify(username), }) .then((response) => response.json()) .then((data) => setData(data)); console.log(data); } function handleUsername(e) { setUsername(e.target.value); } return ( <Box> <Text fontSize="lg"> Search for Github Repositories!</Text> <Divider /> <Input placeholder="Enter a github username" onChange={handleUsername} value={username} /> <Button colorScheme="telegram" position="fixed" ml="3px" onClick={handleGithubSearch} > Submit </Button> {data ? <h1> {data.login}</h1> : null} </Box> ); }Hola, estoy tratando de hacer esta aplicación de búsqueda de github. Cada vez que hago clic para enviar un nombre de usuario y recuperar datos, la función no se activa hasta el segundo clic. Tengo curiosidad por saber por qué.
Como dijo Andy, no puede registrar el estado después de configurarlo, pero puede usar el gancho de efecto para hacerlo. Según la documentación :
No se permiten mutaciones, suscripciones, temporizadores, registros y otros efectos secundarios dentro del cuerpo principal de un componente de función. En su lugar, utilice useEffect. La función pasada a useEffect se ejecutará después de que el procesamiento se confirme en la pantalla. De forma predeterminada, los efectos se ejecutan después de cada procesamiento completo, pero puede optar por activarlos solo cuando ciertos valores han cambiado.
tu funcion
async function handleGithubSearch() { await fetch('/api/github', { method: 'POST', body: JSON.stringify(username), }) .then((response) => response.json()) .then((data) => setData(data)); console.log(data); }es una función asíncrona, es decir, significa que debe esperarse durante su ejecución, por lo que en su botón debe esperar a que esta promesa finalice también aquí abajo es cómo lo habría hecho
<Button colorScheme="telegram" position="fixed" ml="3px" onClick={async () => { await handleGithubSearch() }} > Submit </Button>