react中使用过 useRef定义变量useImperativeHandle抛出，父组件获取获取不到最新数据

react子组件中使用useRef定义变量修改后，通过useImperativeHandle暴露出变量，没有交互操作情况下在父组件中获取不到最新值

之前的代码如下

import React, { forwardRef, useImperativeHandle, useRef } from 'react';
const ChildComponent = forwardRef((props, ref) => { 
  const receivable = useRef(0);
  useEffect(()=>{
      // 一些异步操作后修改receivable值
      receivable.current = 100
  }, [])
   useImperativeHandle(
    ref,
    () => {
      return {
        receivable: receivable.current,
      };
    },
  );
  return ( <div>
      {/* 子组件的内容，可以更新 internalStateRef.current */} 
  </div> );
});


const ParentComponent = () => {
   const childRef = useRef(null);
   const handleButtonClick = () => { 
       console.log('Data from child:', childRef.current.receivable);
   };
    return ( 
        <div> 
            <ChildComponent ref={childRef} /> 
            <button onClick={handleButtonClick}>Get Data from Child</button> 
        </div> 
    );
})

这时在父组件中点击按钮获取的receivable值是0，而不是想要的100。最后解决方法

子组件中修改

useImperativeHandle(
    ref,
    () => {
      return {
        receivable: () =>  receivable.current,
      };
    },
  );

父组件修改

const handleButtonClick = () => { 
       console.log('Data from child:', childRef.current.receivable());
   };

这样修改就可以获取到最新数据了。

之前写的时候直接暴露变量值，而不是方法。后面查询了下文档这里是要暴露方法的