0
427
ViewsCómo resolver setState siempre está un paso atrás en React JS
Soy un principiante. Estoy aprendiendo reaccionar js. estoy teniendo un problema setState siempre está un paso atrás.
Aquí hay una muestra:
Aquí, cuando escribí i , la consola no muestra nada. Luego, cuando escribí la m , muestra i y como está un paso atrás.
Creé dos funciones llamadas handleChange y handleKeyword . Las funciones se comportan igual. Busqué en Internet y obtuve la sugerencia de useEffect() para resolver el problema, pero eso no resolvió mi problema o no puedo implementarlo correctamente.
Aquí están mis códigos:
Inicio.jsx
import React, { useState, useEffect } from 'react'; import Search from '../../components/searchBar/Search'; import './home.scss'; const Home = () => { const [search, setSearch] = useState(''); const [keyword, setKeyword] = useState(''); const handleChange = event => { setSearch(event.target.value); console.log('Search: ', search); }; const handleKeyword = () => { setKeyword(search); console.log('Keyword:', keyword); }; return ( <div className="container pb-5"> <Search handleChange={handleChange} handleKeyword={handleKeyword} keyword={keyword} /> </div> ); }; export default Home;Buscar.jsx
import React from 'react'; import './search.scss' const Search = props => { return ( <div className="d-flex input-group justify-content-center"> <input type="text" className="form-control searchBox" placeholder="Search for copyright free images & videos..." value={props.value} onChange={event => props.handleChange(event)} /> <button className="btn btn-primary" onClick={() => props.handleKeyword()}> Search </button> </div> ); }; export default Search;¿Cómo puedo resolver el problema?
3 answers
Answer question0
En Home.jsx , puede mover las declaraciones de la consola dentro de useEffect con la búsqueda de estados y la palabra clave como dependencias para obtener los valores actualizados. Este problema se debe a que react es de naturaleza declarativa, por lo que decide cuándo se ejecuta setState. Incluso se pueden agrupar por lotes para optimizar el rendimiento. Entonces, useEffect se puede usar en tales casos para escuchar cambios en los estados.
import React, { useState, useEffect } from 'react'; import Search from '../../components/searchBar/Search'; import './home.scss'; const Home = () => { const [search, setSearch] = useState(''); const [keyword, setKeyword] = useState(''); useEffect(() => { console.log('Search: ', search); console.log('Keyword:', keyword); }, [search, keyword]) const handleChange = event => { setSearch(event.target.value); }; const handleKeyword = () => { setKeyword(search); }; return ( <div className="container pb-5"> <Search handleChange={handleChange} handleKeyword={handleKeyword} keyword={keyword} /> </div> ); }; export default Home;0
El problema es setState, solo le prometo que el valor se actualizará No afecta su código, solo mueva console.logs fuera de handleClicks
Entonces, cuando establezca un nuevo estado, verá un nuevo valor solo después de volver a renderizar el componente .
const handleKeyword = () => { setKeyword(search); console.log("Keyword:", keyword); }; console.log("Keyword:2", keyword); console.log("Keyword:", keyword); se llamará en el primer renderizado con el valor antiguo console.log("Keyword:2", keyword); será llamado en el segundo render con un nuevo valor.
0
setState es asíncrono, por lo que los cambios en el estado no se aplican de inmediato. ver aquí https://reactjs.org/docs/react-component.html#setstate
