0
214
VistasCómo volver al estado original en ReactJs cuando no se encuentran datos
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) } } Esta es la salida actual: 
2 Respuestas
Responde la pregunta0
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) }0
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.