我正在使用 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>
</>
);
}
让我们看一下这个场景:
我无法在捕获时调度页面更改事件,因为它会触发重新获取,我不想这样做
我在想的另一个选择是,我应该只在获得数据后才增加页面,但是我会在 useEffect 中创建无限循环,因为在获取数据后页面会改变?
最佳答案
您也可以直接删除 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)
;
关于reactjs - React 使用 useEffect Hook 分页 - 如果请求失败,如何恢复页码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60977481/