react map绑定动态ref获取子组件的实例cuurent为空

父组件动态加载了多个子组件，想在父组件点击确定的时候同时获取全部子组件的值

1.父组件

import { useEffect, useRef, useState } from 'react';
import Son from './Son';

function Parent() {
	const formRef1 = useRef(); //绑定ref
	const formRef2 = useRef(); //绑定ref
	const arrData = [{ //遍历对象，包含子组件的ref
	    ref: formRef1, //注意，不同的组件需要绑定不同的ref实例
	    data:[]
	  },{
	    ref: formRef2,
	    data:[]
	}]
	
	const [arr, setArr] = useState(arrData);
	
	const getSonData = ()=>{ //获取子组件的值
		console.log(arr[0].ref?.current?.getData())}
	}
	
	 return (
    	<>
		<Button type='primary' onClick={()=>{getSonData()}>获取ref数据</Button>
     	 {arr.map((item, index) => {
        	return <Son ref={item.ref} name={index} key={index} data={item.data}></Son>
        	})
         }
       </>
  );
}
export default Parent;

2.子组件

需要引入forwardRef,useImperativeHandle，并且注意传入ref跟props同级；

当该参数forwardRef设置时，包裹组件（wrapper component ）的ref属性将会实际返回被包裹组件（wrapped component）实例。

import { useEffect, useState,forwardRef,useImperativeHandle } from 'react';

const Son = forwardRef((({data,name},ref) => {
	useImperativeHandle(ref, () => {return { getData};});
	const getData = ()=>{ //要暴露给ref的事件
      return {data:`子组件${name}的值`,}
    }
	 return (
    	<>
		<div>{data}</data>
 		</>
   );
})
export default Son;

3.效果