useReducer 成功更新状态,但我无法在组件的函数中达到更新状态

时间:2021-05-22 15:43:44

标签: javascript reactjs

当我检查 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

0 个答案:

没有答案
相关问题