关于React Hook 分页条件查询 切换条件当前页不变的情况

Question

问题描述

当点击下一页后在切换分类时当前页不会改变，正常情况下切换分类后当前页应该会变为1，后来我用如下代码尝试后发现每次切换分类会发两次请求 如下图

正确的应该是没有第三次请求

问题出现的环境背景及自己尝试过哪些方法

下面是相关代码，请各位大佬过目

相关代码

// 分页 当前页
  const [pageNum, setPageNum] = useState(1);

  // 每页个数
  const [pageSize, setPageSize] = useState(10);

  // 博客状态
  const [blogStatus, setBlogStatus] = useState(1);

  // 路由
  const {
    cid,
    tid
  } = useParams();

  // useSelector 代替 mapState
  const articleList = useSelector(state => state.category.articleList, shallowEqual);
  const sidebar = useSelector(state => state.home.sidebar, shallowEqual);
  const {pages, total} = useSelector(state => state.category.page, shallowEqual);

  // useDispatch 代替 mapDispatch
  const dispatch = useDispatch();

  // 重置分页
  useEffect(() => {
    setPageNum(1);
  }, [cid, tid])

  useEffect(() => {

    dispatch(
      getArticlePageAction({
        pageNum,
        pageSize,
        blogStatus,
        categoryId: cid,
        tagId: tid
      }
    ));
  }, [pageNum, pageSize, blogStatus, cid, tid, dispatch]);

const isMore = useMemo(() => pageNum === pages, [pageNum, pages]);

  // 加载更多
  const load = () => {
    return isMore? null: (
      <DivLoad>
        <button className="dposts-ajax-load"
          type="button"
          onClick={() => setPageNum(pageNum + 1)}>加载更多</button>
      </DivLoad>
    )
  }

你期待的结果是什么？实际看到的错误信息又是什么？

希望是切换分类不会发两次请求，正确是结果应该是没有图中的第三次请求

Answer 1

解决了 是因为pageNum、cid、pid都发生变化时会调用多次。如果要想3个变量发生变化只调用一次的话可以写成一个对象。如下:

// 初始化
  const initPage = {
    pageNum: 1,
    pageSize: 10,
    blogStatus: 1,
    categoryId: cid,
    tagId: tid,
  }
  // 分页条件
  const [articleState, setArticleState] = useState(initPage);

location是路由发生变化时监听令pageNum初始值为1

 let location = useLocation();
 useEffect(() => {
    initPage.pageNum = 1;
    initPage.categoryId = cid;
    initPage.tagId = tid;

    setArticleState(initPage);
  }, [location]);


  useEffect(() => {
    dispatch(
      getArticlePageAction({
        pageNum: articleState.pageNum,
        pageSize: articleState.pageSize,
        blogStatus: articleState.blogStatus,
        categoryId: articleState.categoryId,
        tagId: articleState.tagId
      }
    ));

  }, [articleState, dispatch]);

当点击加载更多改变initPage中的pageNum同时要带上cid和tid

 const nextPage = () => {
    initPage.pageNum++;
    initPage.categoryId = cid;
    initPage.tagId = tid;

    setArticleState(initPage);
  }

  

  const isMore = useMemo(() => articleState.pageNum === pages, [articleState.pageNum, pages]);

  // 加载更多
  const load = () => {
    return isMore? null: (
      <DivLoad>
        <button className="dposts-ajax-load"
          type="button"
          onClick={() => nextPage()}>加载更多</button>
      </DivLoad>
    )
  }