问题描述
一个列表组件,初始化请求列表接口getData,支持异步参数keyword和codes。初始化时,出现重复请求列表接口问题
相关问题
1.useState无法如setState处理异步问题
2.useEffec如何区分用户行为和初始态
3.React Hooks useEffect多个依赖数据批量操作
React hooks
常规解题思路
问题:初始化时keyword和codes异步更新,会触发两次接口请求
/* 触发搜素 */
useEffect(() => {
getData()
}, [keyword, codes])
基于防抖、useEffect,封装函数useBatchEffect支持批量更新操作
import { DependencyList, EffectCallback, useEffect, useRef } from 'react'
import { debounce } from 'lodash'
/* 防抖Hook */
export function useDebounce<T extends Function>(fn: T, wait = 1000) {
const func = useRef(fn)
func.current = fn
const debounceWrapper = useRef(debounce((args) => func.current?.(args), wait))
return debounceWrapper.current as unknown as T
}
/**
* 批量设置更新
*/
export function useBatchEffect(effect: EffectCallback, deps?: DependencyList, wait = 0) {
const fn = useDebounce(effect, wait)
useEffect(fn, deps)
}
使用
useBatchEffect(() => {
getData()
}, [keyword, codes])
或者可以直接使用ahooks的useDebounceEffect
总结
建议使用react hooks封装useBatchEffect监听接口依赖数据,逻辑简单,可读性和可维护性较好