Scroll 下拉加载更多的自定义 customHook

话不多说，直接上 hook 代码，撸它 ，首先后端返回数据最好有分页的功能，那我们可以每次拼接，没有的话只能前端 slice 自己分割

import { useEffect, useReducer, useState } from "react";
const UPDATE_STATE = 'UPDATE_STATE';
const DEFAULT_STATE  = {
  curPage: 1,
  pageSize: 10,
  listDefault: [],
  loading: false,
  isHasMore: false
}
const reducer = (state, action) => {
  switch (action.type) {
    case UPDATE_STATE:
      return {
        ...state,
        ...action.data
      }
  }
}
export const useScrollListMore = (category, services, params ) => {
  const [
      { curPage, pageSize, listDefault, loading, isHasMore }, dispatch
  ] = useReducer(reducer, DEFAULT_STATE)

  useEffect(() => {
    if(!category) {
      resetListDefault();
    }else {
      getListDefault()
    }
  }, [category, curPage])

  const resetListDefault = () => {
      dispatch({
        type: UPDATE_STATE,
        data: { curPage: 1, listDefault: [], loading: false, isHasMore: false }
      })
  }

  const getListDefault = async () => {
        dispatch({
            type: UPDATE_STATE,
            data: { loading: true }
        })

        const { data } = await services({...params, current: curPage})
        const newListDefault = listDefault.concat(data.items);

        dispatch({
            type: UPDATE_STATE,
            data: { 
                listDefault: newListDefault, loading: false, isHasMore: data.has_next
            }
        })
  }

  const onPaginationChange = (paramPage) => {
    if(loading) { return }

    if(isHasMore) {
        dispatch({
            type: UPDATE_STATE,
            data: { curPage: curPage + 1 }
        })
    }
  }

  return {
    curPage,
    pageSize,
    listDefault,
    loading,
    isHasMore,
    resetListDefault,
    onPaginationChange 
  } 
}

页面调用方法

useScrollListMore(category, services, params ) 第二个参数，services

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习