Al usar useImperativeHandle, el componente principal no obtuvo el método del componente secundario por primera vez

Al usar useImperativeHandle, el componente principal no obtuvo el método del componente secundario por primera vez

necesidades de fondo

Una pestaña tiene dos botones A y B. De manera predeterminada, se selecciona A. Cuando se hace clic en B, se debe mostrar el gráfico correspondiente a B. Teniendo en cuenta que el gráfico de B se ha inicializado cuando se carga la página, se llama al método de cambio de tamaño del gráfico cuando se hace clic en B. Dado que el gráfico en la pestaña está escrito en el componente secundario, el componente principal llama al método del componente secundario a través de useImperativeHandle, React version "react": "^18.1.0", el código es el siguiente

• componente padre:

const childRef = useRef()
const item = [{
    
    
        name: 'XXXX',
        content: <RunningRecord cRef={
    
    childRef} />,
        handClick: childRef.current?.resizeChart
}]

return <>
    ……
    <li onClick={
    
    () => {
    
    
            setTimeout(() => {
    
    
                console.log('~~item.handClick',item.handClick)
                item.handClick?.()
            }, 200)
        }}
        key={
    
    item.name}>
        {
    
    item.name}
    </li>
    ……
    <RunningRecord cRef={
    
    childRef} />
</>

• Subensamblaje:

function RunningRecord({
     
      cRef }) {
    
    
    ……
    useImperativeHandle(cRef,()=>({
    
    
        resizeChart:()=> {
    
    dosomething……}
    }))

pregunta

De esta forma, funciona normalmente en el modo de desarrollo local, pero en el entorno de producción, el componente principal no puede obtener el componente secundario cuando se carga por primera vez. Necesita tabular para cambiar a A y luego a B nuevamente. Adivine la razón, probablemente en el entorno de producción, el componente principal vincula el método expuesto por el componente secundario al evento de clic en la interfaz de usuario, y el componente secundario se inicializa tarde y el evento no se devuelve después de la finalización inicial.
Esta conjetura no es necesariamente precisa, y los amigos que la conocen pueden agregarla.

Solución

En el componente principal, coloque el proceso de asignación de subcomponentes en useEffect, no escriba el parámetro de dependencia (no una matriz vacía sin dependencias) y luego ejecute, todo es normal.

const usageRecordData = [{
    
    
    name: 'XXXX',
    content: <RunningRecord cRef={
    
    childRef} />,
}]

useEffect(() => {
    
    
    usageRecordData[1].handClick = childRef.current?.resizeChart
})