Obtuve una entrada y quiero pasar el valor al controlador:
const [term, setTerm] = useState(''); <Input type="text" onBlur={(e)=>handleFilter(e, 'params')} /> const handleFilter = async(e, params) => { //... api call and etc setTerm(e.target.value); // update term console.log(term) // return none-updated value! but I need fresh value // send this value to another api } Quiero hacer una función de filtro de búsqueda, por ej. si ingreso a , la consola regresa vacía, entonces ingreso b la consola regresa a ! significa que el term no se actualiza inmediatamente, luego usé useEffect pero dentro de useEffect obtuve un nuevo valor, pero dentro de la función handleFilter aún la consola devuelve el valor anterior.
useEffect(() => { getApi() .then(data => { console.log(data) }) console.log(term) // works fine, return new value setTerm(term) // update term }, [term])Intenté esto pero sin éxito:
setTerm({...term, e.target.value});¿Alguna solución? Soy nuevo en reaccionar gancho.
Puedes consultar esta respuesta aquí .
Esto se debe a que la actualización de estado de react es asíncrona. No puede confiar en su actualización justo después de llamar a setState . Coloque sus efectos (código que se ejecuta después de que se actualiza un estado) en un useEffect .
const handleFilter = async(e, params) => { //... api call and etc setTerm(e.target.value); // update term } React.useEffect(() => { console.log(term) // return none-updated value! but I need fresh value // send this value to another api }, [term]);setTerm es asíncrono y actualizará el term en el próximo ciclo de procesamiento. no se actualiza inmediatamente para el ciclo de renderizado actual. puede almacenar el valor actual en una referencia si tiene curiosidad por lo que sucede detrás de escena
const termRef = React.useRef(term); termRef.current = term; const yourHandler = () => { setTimeout(() => console.log(termRef.current), 0); }Si vamos a seguir adelante con useEffect con una llamada a la API, asegúrese de incluir un escenario de espera asíncrona para asegurarse de que setState actualice después de que se obtengan los datos.
useEffect(async () => { const data = await getApi() console.log(term) // works fine, return new value setTerm(term) // update term }, [term])