Esta lógica se trata de filtrar casas según los filtros (como el propósito, el precio, etc.) cuando cambio los filtros, no sucede nada (no cambia la URL) o no hay errores en la consola. Parece que los datos no se pasan a searchProperties.
No puedo encontrar ninguna solución.
Nota: ignorar los comentarios.
import classes from "./FilterProperties.module.css"; import { useState } from "react"; import { filterData, getFilterValues } from "../../lib/filterData"; import { useLocation,useSearchParams, useNavigate} from "react-router-dom"; import DropDown from "./DropDown"; const FilterProperties = () => { const location = useLocation(); const [filters, setFilters] = useState(filterData); const [searchParams, setSearchParams] = useSearchParams(); const navigate = useNavigate(); const searchProperties = (filterValues) => { const path = location.pathname; console.log(path); const query = searchParams.get("query"); console.log(query); // undefined const values = getFilterValues(filterValues); // error // console.log(values); values.forEach((item) => { setSearchParams[item.name] = item.value; }); navigate({ pathname: path, query }); }; return ( <div className={classes.item}> {filters.map((filter) => ( <DropDown key={filter.queryName} placeholder={filter.placeholder} filter={filter} onChange={(e) => { searchProperties({ [filter.queryName]: e.target.value }); }} /> ))} </div> ); }; export default FilterProperties;Parece que está haciendo un mal uso de la función setSearchParams . El useSearchParams devuelve un objeto URLSearchParams y una función setSearchParams que funciona de manera similar a la función de navigate pero solo actualiza la parte de búsqueda de la URL. La esencia básica es que solo necesita iterar sobre los pares clave-valor del filtro, actualizar el objeto searchParams y luego emitir la navegación imperativa con los parámetros de consulta actualizados.
Ejemplo:
... const [searchParams, setSearchParams] = useSearchParams(); ... const searchProperties = (filterValues) => { const values = getFilterValues(filterValues); // * values.forEach(({ name, value }) => { searchParams.set(name, value); // <-- set query parameter value }); setSearchParams(searchParams); // <-- update query params }; * Nota: asumo que getFilterValues(filterValues) funciona y devuelve todos los pares clave-valor de filtro con los que trabaja la interfaz de usuario.