防抖函数 react hooks

import React, { useState, useEffect, useRef, useCallback } from 'react';
 
 
export default () => {
  const [inputValue, setInputValue] = useState('')
  
  // 防抖函数
  function useDebounce(fn, delay) {
    const { current } = useRef({ fn, timer: null });
    useEffect(function () {
      current.fn = fn;
    }, [fn]);
  
    return useCallback(function f(...args) {
      args[0].persist() // 这里需要这样设置是因为会警告
      // console.log('')
      setInputValue(args[0].target.value)  // 这里需要setState一下，不然，得不到value
      if (current.timer) {
        clearTimeout(current.timer);
      }
      current.timer = setTimeout(() => {
        current.fn.call(this, ...args);
      }, delay);
    })
  }
  
  const handleValue = useDebounce(v => { // 获取input的值
    const value = v.target.value
    console.log({value})
  }, 800)
 
  // console.log({botlist})
  return <div className='bot-content'>
    <div className='input-bot'>
      <Input className='input-left' value={inputValue} placeholder='请输入回复内容' onChange={v => handleValue(v)} />
    </div>
  </div>
}

event.persist(),这个是要加上的，不然会报一个警告！

由于性能原因，此综合事件被重用。如果您看到此消息，那么您正在访问已发布/无效的合成事件上的属性“ target”。设置为空。如果必须保留原始的合成事件，请使用event.persist（）