如何通过useImperativeHandle将子组件值暴露给父组件并获取实时值

你遇到的核心问题是闭包+useState异步更新导致的：

1. 子组件中useState的更新是异步批量执行的，调用increment后，counter不会立刻更新，此时父组件直接访问ref.current.counter拿到的是旧值。
2. 如果useImperativeHandle没有把counter加入依赖数组，暴露的对象里的counter会一直是初始渲染时的闭包值，即使子组件重新渲染，父组件ref中的值也不会同步更新。

以下是几种可靠的解决方式，按需选择：

方案一：子组件通过回调主动通知父组件（推荐） #

让子组件在更新counter后，通过父组件传递的回调函数把最新值同步过去，完全避免依赖ref的闭包问题。

子组件代码 #

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

const Child = forwardRef(({ onCounterChange }, ref) => {
  const [counter, setCounter] = useState(0);

  const increment = () => {
    setCounter(prev => {
      const newCount = prev + 1;
      onCounterChange(newCount); // 主动通知父组件最新值
      return newCount;
    });
  };

  // 按需暴露方法，counter可通过回调获取，也可加入依赖同步到ref
  useImperativeHandle(ref, () => ({ increment }), []);

  return <div>子组件计数器：{counter}</div>;
});

export default Child;

父组件代码 #

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

export default function App() {
  const parentRef = useRef();
  const [parentCounter, setParentCounter] = useState(0);

  const handleClick = () => {
    parentRef.current.increment();
  };

  return (
    <div>
      <button onClick={handleClick}>点击递增</button>
      <Child ref={parentRef} onCounterChange={setParentCounter} />
      <div>父组件实时计数器：{parentCounter}</div>
    </div>
  );
}

方案二：用useRef同步子组件state值 #

在子组件中维护一个与counter同步的ref，通过getter实时获取最新值，不受闭包影响。

子组件代码 #

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

const Child = forwardRef((props, ref) => {
  const [counter, setCounter] = useState(0);
  const counterRef = useRef(counter);

  // 同步state到ref
  useEffect(() => {
    counterRef.current = counter;
  }, [counter]);

  const increment = () => {
    setCounter(prev => prev + 1);
  };

  useImperativeHandle(ref, () => ({
    increment,
    // 用getter实时返回最新值
    get counter() {
      return counterRef.current;
    }
  }), []);

  return <div>子组件计数器：{counter}</div>;
});

export default Child;

父组件获取实时值（可选） #

如果需要点击后立刻拿到最新值，可以把increment改成异步方法：

// 子组件中修改increment
const increment = () => {
  return new Promise(resolve => {
    setCounter(prev => {
      const newCount = prev + 1;
      resolve(newCount);
      return newCount;
    });
  });
};

// 父组件调用
const handleClick = async () => {
  const newCount = await parentRef.current.increment();
  console.log('最新计数器值：', newCount);
};

方案三：修正useImperativeHandle的依赖 #

如果一定要通过ref直接获取counter，需要把counter加入useImperativeHandle的依赖数组，确保每次counter变化时，暴露的对象会更新。

子组件代码 #

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

const Child = forwardRef((props, ref) => {
  const [counter, setCounter] = useState(0);

  const increment = () => {
    setCounter(prev => prev + 1);
  };

  // 加入counter依赖，每次counter变化时重新生成暴露对象
  useImperativeHandle(ref, () => ({
    increment,
    counter
  }), [counter]);

  return <div>子组件计数器：{counter}</div>;
});

export default Child;

这种方式下，父组件在触发自身更新（比如修改自己的state）后，下一次渲染时就能拿到最新的counter值，但点击后立刻访问还是会拿到旧值（因为useState异步更新）。

内容的提问来源于stack exchange，提问作者Alexey