const [inputValue,setInputValue] = useState("") handleChange = (e)=>{ setInputValue(e.target.value) console.log(e.target.value,inputValue) }esta es una función simple de etiqueta de entrada onChange , pero lo que está aquí dentro de la función handleChange cuando estoy registrando los valores e.target.value es lo que estoy escribiendo en el campo e inputValue, que es el estado en el que estoy configurado, en realidad está vacío, así que si escribo, digamos 'd' en el campo de entrada, el valor del estado está realmente vacío y la próxima vez que escriba algo ahora tiene el valor 'd' que he escrito anteriormente... por favor, ayúdenme a resolver esto
Sí. El cambio de estado es una operación asíncrona. console.log se ejecutó inmediatamente. Eso significa que console.log imprime el valor de entrada antes de la actualización del estado. Es por eso que si hacer el segundo está mostrando el valor anterior.
Mejor puedes detectar el cambio de estado usando useEffect
useEffect(()=>{ console.log(inputValue) },[inputValue])"Lo que pasa es que quiero hacer una barra de búsqueda y por eso cuando escribo, digamos "a" o algo así, la búsqueda no funciona porque el valor del estado está vacío en ese momento".
El estado de configuración es un proceso asíncrono. Cuando intenta registrar el estado inmediatamente después de configurarlo, todo lo que está haciendo es registrar el estado existente antes de que el componente se haya vuelto a renderizar.
@prasanth tiene razón con su respuesta de que agregar un useEffect para observar cambios en el estado de entrada es la única forma de registrar ese nuevo estado.
Si está tratando de escribir una barra de búsqueda, aquí hay una solución artificial rápida que filtra los nombres de animales de una matriz.
const { useState } = React; function Example({ data }) { // Initialise the input state const [ input, setInput ] = useState(''); // When the input value changes // update the state function handleChange(e) { setInput(e.target.value); } // `filter` the data using the input state, // and then `map` over that array to return // an array of JSX function getFiltered(input) { return data .filter(el => el.toLowerCase().includes(input)) .map(el => <p>{el}</p>); } return ( <div> <input type="text" placeholder="Find an animal" onChange={handleChange} value={input} /> <div>{getFiltered(input)}</div> </div> ); } const data=["Alpine Goat","Beaver","Carolina Parakeet","Dragonfish","Eurasian Wolf","Frilled Lizard","Gila Monster","Honduran White Bat","Immortal Jellyfish","Japanese Macaque","Kooikerhondje","Leopard Gecko","Megalodon","Nova Scotia Duck Tolling Retriever","Orb Weaver","Pink Fairy Armadillo","Rhombic Egg-Eater Snake","Satanic leaf-tailed gecko","Tibetan Fox","Umbrellabird","Vervet Monkey","Whoodle","Xoloitzcuintli","Yeti Crab","Zonkey"]; ReactDOM.render( <Example data={data} />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>