使用useRef解决useState异步更新数据导致更新不及时问题

由于react hooks中useState更新值是异步的，所以会出现值更新不及时，可以使用useRef来解决这个问题

定义useCallbackState函数

import { useState, useRef, useEffect } from 'react';

export function useCallbackState(state: any) {
  const cbRef = useRef();
  const [data, setData] = useState(state);

  useEffect(() => {
    cbRef.current && cbRef.current(data);
  }, [data]);

  return [
    data,
    function (val: any, callback: any) {
      cbRef.current = callback;
      setData(val);
    },
  ];
}

调用

import { useCallbackState } from '@/utils/callbackState';
import { Input } from 'antd';
const {Search} =Input;

const Index: React.FC = () => {
  const [searchParam, setSearchParam] = useCallbackState();

  const onSearch = (params: any) => {
    setSearchParam({ ...searchParam, title: params }, function (data: any) {
        //在回调函数里 会得到更新后的值
        console.log(data);
    });
  };
  return (
   <Search
    allowClear
    enterButton="搜索"
    onSearch={onSearch}
  />);
}
export default Index;