reactjs - React 使用 useEffect Hook 分页 - 如果请求失败，如何恢复页码？

Question

我正在使用 react 钩子(Hook)测试简单的分页，并想知道如何处理失败以使其保持有效状态？

伪代码:

function reducer(state, action) {
  switch (action.type) {
    case 'next':
      return {page: state.page + 1};
    case 'prev':
      return {page: state.page - 1};
    default:
      throw new Error();
  }
}

function Page() {
  const [state, dispatch] = useReducer(reducer, { page: 1});

  useEffect(() => {
    loadMore(state.page)
    .then(r => console.log(r))
    .catch(e => {
      // how to revert page without triggering this effect?
      // cause if I do dispatch({type: 'prev'}) page will change, and this will re-run
      console.log(e)
    })
  }, state.page)

  return (
    <>
      Page: {state.page}
      <button onClick={() => dispatch({type: 'prev'})}>-</button>
      <button onClick={() => dispatch({type: 'next'})}>+</button>
    </>
  );
}

让我们看一下这个场景:

我们从第 1 页开始

用户点击下一步

页面在状态

中增加

useEffect 触发，网络请求失败。

page in state 为 2，但实际数据为 page 1

我无法在捕获时调度页面更改事件，因为它会触发重新获取，我不想这样做

我在想的另一个选择是，我应该只在获得数据后才增加页面，但是我会在 useEffect 中创建无限循环，因为在获取数据后页面会改变？

Answer 1

您也可以直接删除 useEffect 并改用这样的功能:

let fetch = (page, isNext)=>{

 loadMore(page)
    .then(r => {
      // ..
      isNext ? dispatch({type: 'next'}):dispatch({type: 'prev'});
    })
    .catch(e => {
      // Don't dispatch anything, you will remain on same page
    })

}

现在，当用户单击下一步时，只需调用 fetch(state.page + 1, true) .如果她点击 prev btn，请使用 fetch(state.page - 1, false) ;