const BankSearch = ({ banks, searchCategory, setFilteredBanks }) => { const [searchString, setSearchString] = useState(); const searchBanks = (search) => { const filteredBanks = []; banks.forEach((bank) => { if (bank[searchCategory].toLowerCase().includes(search.toLowerCase())) { console.log(bank[searchCategory].toLowerCase()); filteredBanks.push(bank); } }); setFilteredBanks(filteredBanks); }; const debounceSearch = useCallback(_debounce(searchBanks, 500), []); useEffect(() => { if (searchString?.length) { debounceSearch(searchString); } else setFilteredBanks([]); }, [searchString, searchCategory]); const handleSearch = (e) => { setSearchString(e.target.value); }; return ( <div className='flex'> <Input placeholder='Bank Search' onChange={handleSearch} /> </div> ); }; export default BankSearch;el estado de FilteredBanks no se está actualizando
banks es un estado abuelo que tiene muchos objetos, similar a filteredBanks, cuyo método set se llama aquí, que es setFilteredBanks
si agrego un registro de consola y lo guardo o elimino, el estado se actualiza
Agregar o eliminar la declaración de la consola y guardar el archivo, vuelve a representar la función, el estado de la función interna se actualiza y se devuelve con la devolución de llamada (setState).
(@vnm) Agregar filteredBanks a su matriz de dependencias no servirá de mucho porque es parte del alcance léxico de la función searchBanks
No estoy del todo seguro del contexto total de este BankSearch o de lo que debería ser. Lo que sí veo es que hay algunos antipatrones y dependencias que faltan.
Prueba esto:
export default function BankSearch({ banks, searchCategory, setFilteredBanks }) { const [searchString, setSearchString] = useState(); const searchBanks = useCallback( search => { const filteredBanks = []; banks.forEach(bank => { if (bank[searchCategory].toLowerCase().includes(search.toLowerCase())) { filteredBanks.push(bank); } }); setFilteredBanks(filteredBanks); }, [banks, searchCategory, setFilteredBanks] ); const debounceSearch = useCallback(() => _debounce(searchBanks, 500), [searchBanks]); useEffect(() => { if (searchString?.length) { debounceSearch(searchString); } else setFilteredBanks([]); }, [searchString, searchCategory, setFilteredBanks, debounceSearch]); const handleSearch = e => { setSearchString(e.target.value); }; return ( <div className="flex"> <Input placeholder="Bank Search" onChange={handleSearch} /> </div> )}Parece que el componente debería ser una búsqueda y un filtro muy simples y parece demasiado complicado para lo que debe hacer.
Nuevamente, no conozco el contexto completo, sin embargo, miraría la arquitectura/estructuración de componentes de la aplicación y el estado.