React父组件通过ref调用子组件函数时获取过时子状态问题

你在子组件中使用useImperativeHandle时，传入的依赖数组是空数组[]。这会导致该钩子仅在子组件首次渲染时执行一次，此时绑定给父组件的undo函数，捕获的是首次渲染时的闭包环境，对应的betHistory是初始空值。

子组件后续状态更新触发重新渲染时，会生成新的undo函数，新函数的闭包可以拿到最新的betHistory状态。子组件自身绑定的onClick={undo}会自动使用最新版本的undo函数，因此自调用时可以拿到最新值。而useImperativeHandle没有触发更新，暴露给父组件的依然是首次渲染时绑定的旧版本undo函数，因此父组件调用时永远只能拿到初始的空数组。

有两种常用的修复方式：

方案1：给useImperativeHandle添加正确依赖 #

将undo函数加入useImperativeHandle的依赖数组，当undo函数更新时，暴露给父组件的方法也会同步更新。为了避免不必要的更新，可以用useCallback包裹undo函数：

import React, { useState, forwardRef, useImperativeHandle, useCallback } from 'react';
import './Table.css';

function Table(props, ref) {
  const [betHistory, setBetHistory] = useState([]);
  const [betCount, setBetCount] = useState(0);

  function placeBet(element) {
    const newBetHistory = [...betHistory, betCount.toString()];
    setBetHistory(newBetHistory);
    setBetCount(prev => prev + 1);
  }

  // 用useCallback包裹，依赖为betHistory
  const undo = useCallback(() => {
    console.log(betHistory);
  }, [betHistory]);

  // 将undo加入依赖数组
  useImperativeHandle(ref, () => ({
    undo
  }), [undo])

  return (
    <>
      <div className="button" onClick={undo}>子组件触发undo</div>
      <div className="bet-button" onClick={placeBet}>下注</div>
    </>
  );
}

export default forwardRef(Table)

方案2：用useRef存储状态副本 #

如果不想频繁更新暴露给父组件的方法，可以用useRef同步存储betHistory的最新值，undo函数直接读取ref的值即可，不受闭包影响：

import React, { useState, forwardRef, useImperativeHandle, useRef } from 'react';
import './Table.css';

function Table(props, ref) {
  const [betHistory, setBetHistory] = useState([]);
  // 新建ref同步状态
  const betHistoryRef = useRef([]);
  const [betCount, setBetCount] = useState(0);

  function placeBet(element) {
    const newBetHistory = [...betHistory, betCount.toString()];
    setBetHistory(newBetHistory);
    // 更新状态同时同步更新ref
    betHistoryRef.current = newBetHistory;
    setBetCount(prev => prev + 1);
  }

  function undo() {
    // 直接读取ref的最新值，不受闭包限制
    console.log(betHistoryRef.current);
  }

  // 依赖数组依然可以为空
  useImperativeHandle(ref, () => ({
    undo() {
      undo();
    }
  }), [])

  return (
    <>
      <div className="button" onClick={undo}>子组件触发undo</div>
      <div className="bet-button" onClick={placeBet}>下注</div>
    </>
  );
}

export default forwardRef(Table)

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