React子组件调用父组件方法获取的数据不是最新值的解决方法

const Parent: React.FC = () => {
  const [val, setVal] = useState(0);

  const onBtnsClick = () => {
    console.log(val);
  };

  return (
    <div>
      {val}
      <button onClick={() => setVal(val => val + 1)}>加一</button>
      <Child onClick={onBtnsClick} />
    </div>
  );
};

const Child: React.FC<{ onClick: () => void }> = ({ onClick }) => {
  // useCallback + 防抖
  const onBtnClick = useCallback(
    _.debounce(onClick, 1000, { leading: true, trailing: false }),
    []
  );
  return <button onClick={onBtnClick}>子组件</button>;
};

// 如果点击的事件不会导致父组件刷新，从而刷新子组件
const onBtnClick = _.debounce(onClick, 1000, {
  leading: true,
  trailing: false,
});

const Test: React.FC = () => {
  const [val, setVal] = useState(0);
  const onBtnsClick = useCallback(() => {
    console.log(val);
    setVal(val => val + 2)
  }, [val]);

  return (
    <div>
      {val}
      <button onClick={() => setVal(val => val + 1)}>加一</button>
      <div>
       <Child onClick={onBtnsClick} />
  );
};

const Child = memo(({ onClick }) => {
  const onBtnClick = _.debounce(onClick, 1000, {
    leading: true,
    trailing: false,
  });
  return <button onClick={onBtnClick}>子组件</button>;
});

const onBtnClick2 = useCallback(
  _.debounce(onClick, 1000, { leading: true, trailing: false }),
  [val]
);

<Child key={val} onClick={onBtnsClick} />

// 或者
<div key={val}>
  <Child  onClick={onBtnsClick} />
</div>