当我检查 React Developer Tool 或使用 console.log(state) 时,我可以达到更新状态,但在我的组件中的其他功能中,我无法达到更新状态。 handleScroll 函数中的 console.log(state) 总是显示初始状态。我试图调试这个错误将近 3 个小时,但无法弄清楚。导致此问题的原因是什么?
jsx 文件
import reducer, { initialState } from '../Views/Reports/InstantReport.reducer'
export default function HXInstantReport({ ...others }) {
const [state, dispatch] = useReducer(reducer, initialState)
const search = async (filter = state.filter, limit = state.limit, exportAsCsv = state.export) => {
const query = {
offset: state.offset,
limit,
export: exportAsCsv,
}
const queryString = qs.stringify(query, { encode: true })
try {
dispatch({ type: 'SEARCH_REQUEST' })
dispatch({ type: 'offset+1' })
const searchResponse = await Service.GetInstantReport(queryString)
const { Total, Count, Data } = searchResponse?.data
let data = Data || []
if (state.offset > 0) {
data = [...state.reports, ...data]
}
dispatch({
type: 'SEARCH_SUCCESS',
payload: {
...
},
})
} catch (error) {
dispatch({ type: 'SEARCH_ERROR' })
}
}
const handleScroll = (event) => {
const maxScroll = event.target.scrollHeight - event.target.clientHeight
const currentScroll = event.target.scrollTop
if (currentScroll === maxScroll) {
console.log(state.offset)
search()
}
}
useEffect(() => {
const tableContent = document.querySelector('.ant-table-body')
tableContent.addEventListener('scroll', handleScroll)
search()
return () => {
tableContent.removeEventListener('scroll', handleScroll)
}
}, [])
return (...)
}
```
reducer and initial state
```
export const initialState = {
loading: true,
megaMerchantsHasError: false,
megaMerchantsLoading: true,
reports: [],
hasMore: false,
hasError: false,
megaMerchants: [],
offset: 0,
limit: 10,
count: 0,
total: 0,
export: false,
}
export default function reducer(state, action) {
const { payload, type } = action
case 'SEARCH_SUCCESS':
return {
...state,
reports: [...payload.reports],
loading: false,
count: payload.count,
total: payload.total,
hasMore: payload.total > state.reports.length,
offset: state.offset + state.limit
}
case 'SEARCH_ERROR':
return {
...state,
hasError: true,
loading: false,
}
...
}
```
I found the reason and the solution. I figured out that state being reset every re-render so late :D Detailed answer below.
https://stackoverflow.com/questions/56511176/state-being-reset