我是整個 React 和 React hooks 作業人員的新手，如果選擇了新過濾器，我正在嘗試將 useState 中的值重置為默認值。
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)
})
}
uj5u.com熱心網友回復：
識別要傳遞的頁面以從loadMore引數中獲取，而不是從狀態值中獲取。同樣，從引數中確定要傳遞給的內容setApartments。這樣，所有狀態都會在 fetch 中一次更新。
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
}
我還建議更改
filtersWrapper.current.querySelectorAll('.select-wrapper select').forEach
從 DOM 方法改為設定 React 狀態。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/450484.html
標籤：javascript 反应