React挂钩-无法在子组件onComplete回调中调用父组件调度

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const handleComplete = () => {
    // 处理完成事件
    console.log('完成事件被触发');
  };

  return (
    <div>
      <ChildComponent onComplete={handleComplete} />
    </div>
  );
}

export default ParentComponent;

// 子组件
import React, { useEffect } from 'react';

function ChildComponent({ onComplete }) {
  useEffect(() => {
    // 监听完成事件的变化
    onComplete();
  }, [onComplete]);

  const handleButtonClick = () => {
    // 触发完成事件
    onComplete();
  };

  return (
    <div>
      <button onClick={handleButtonClick}>点击完成</button>
    </div>
  );
}

export default ChildComponent;