Actualmente estoy obteniendo datos de mi base de datos, pero por la simplicidad de esta Q, he decidido crear manualmente un ejemplo con datos falsos.
Estoy creando una barra de búsqueda para que mis usuarios revisen todos los datos provenientes de la base de datos y todo parece funcionar bien al buscar un documento específico, sin embargo, quiero restablecer el estado a sus datos originales cuando la entrada esta vacio.
Esto es lo que he intentado hasta ahora pero sin éxito. ¿Me estoy perdiendo de algo?
const objects = [ { _id: 0, title: 'Title One', }, { _id: 1, title: 'Title Two', }, { _id: 2, title: 'Title Three', }, ] const [keyword, setKeyword] = useState('') const [list, setList] = useState([]); useEffect(() => { setList(objects); }, [objects]); const handleChange = () => (e) => { e.preventDefault() setKeyword(e.target.value) if (keyword !== '') { const result = objects.filter((object) => { return object.title.toLowerCase().startsWith(keyword.toLowerCase()) }) setList(result) } else { // THIS IS WHERE THE PROBLEM RESIDES... console.log('Original data') setList(objects) } }
Lo que estás haciendo mal está en estas líneas.
setKeyword(e.target.value) if (keyword !== '') {
El estado se actualiza de forma asíncrona y el valor de la keyword
será antiguo.
Lo que puede hacer es actualizar el estado en handleChange
y luego tener un useEffect
separado para actualizar los resultados:
const [keyword, setKeyword] = useState('') const [list, setList] = useState([]); useEffect(() => { setList(objects); }, [objects]); useEffect(() => { if (keyword !== '') { const result = objects.filter((object) => { return object.title.toLowerCase().startsWith(keyword.toLowerCase()) }) setList(result) } else { // THIS IS WHERE THE PROBLEM RESIDES... console.log('Original data') setList(objects) } }, [keyword]); const handleChange = () => (e) => { e.preventDefault() setKeyword(e.target.value) }
Los establecedores de estado son asincrónicos. El código que sigue a una actualización de estado (su if(keyword)
puede ejecutarse antes de que se complete la actualización de estado ( setKeyword
)
Su código puede simplificarse si combina la keyword
y la list
en un solo objeto.
var [searchState, setSearchState] = useState({keyword: '', list: objects.slice()); handleChange=(evt)=>{ let word = evt.target.value; let wordLower= word.toLowerCase(); setSearchState({ keyword:word, list: word?objects.filter(o=>o.title.toLowerCase().startsWith(wordLowerCase):objects.slice() }); };
O puede usar un componente basado en clases donde el estado es un solo objeto.