Soy nuevo en todo el personal de React y React hooks, estoy tratando de restablecer el valor en useState a su valor predeterminado si se seleccionan nuevos filtros.
const [apartments, setApartments] = React.useState([]) const [page, setPage] = React.useState(1) const fetchData = (onInit = true, loadMore = true) => { let setQuery = '' if (!loadMore) { setApartments([]) // <--- how to reset to empty? setPage(1) // <--- Not setting value to 1 } if (!onInit || query()) { filtersWrapper.current.querySelectorAll('.select-wrapper select').forEach(item => { if (item.value) { setQuery += `&${ item.name }=${ item.value }` } }) } fetch(apiUrl + `?page=${ page }&pageSize=12${ setQuery }`) .then(res => res.json()) .then(data => { setApartments([...apartments, ...data.apartments] || []) setHasNextPage(data.hasNextPage) setPage(prev => prev + 1) }) }Identifique la página para pasar a buscar desde el argumento loadMore , no desde el valor del estado. Del mismo modo, identifique a partir del argumento qué pasar a setApartments . De esta manera, todo el estado se actualiza a la vez, dentro de la búsqueda.
const fetchData = (onInit = true, loadMore = true) => { let setQuery = '' if (!onInit || query()) { filtersWrapper.current.querySelectorAll('.select-wrapper select').forEach(item => { if (item.value) { setQuery += `&${item.name}=${item.value}` } }) } const pageToNavigateTo = loadMore ? page : 1; fetch(apiUrl + `?page=${pageToNavigateTo}&pageSize=12${setQuery}`) .then(res => res.json()) .then(data => { const initialApartments = loadMore ? apartments : []; setApartments([...initialApartments, ...data.apartments]); setHasNextPage(data.hasNextPage); setPage(pageToNavigateTo + 1); }) // .catch(handleErrors); // don't forget this }También recomendaría cambiar el
filtersWrapper.current.querySelectorAll('.select-wrapper select').forEachdesde los métodos DOM hasta establecer el estado React en su lugar.