React子组件函数被父组件调用时无法读取当前状态求助

我有一个Parent组件包含Child组件。Child组件包含多个表单元素、对应的状态以及验证这些元素的函数。Parent组件有一个表单按钮，点击时会调用Child组件中实现的验证函数。

问题在于：当从Parent组件的提交事件中调用该函数时，函数无法读取状态变量的当前值（只能看到初始值）；但从Child组件内部调用该函数时，却能正常读取当前值。

父组件代码 #

type ValidatorRunner = () => boolean;

const Parent = () => {

  const [ childValidator, setChildValidator ] = useState<ValidatorRunner>();

  function validateChild(): boolean {
    if (childValidator) return childValidator();
    else return false;
  }

  const doSubmit = async (e: SyntheticEvent) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);          
    const formJson = Object.fromEntries(formData.entries());

    if (validateChild()) {
      console.log("[Parent]: Good to send data:\n" + JSON.stringify(formJson));
    } else {
      console.log("[Parent]: Can't send data (data not valid)");
    }
  };

  return (
    <div>
      <form onSubmit={ doSubmit }>
        <div>Parent</div>
        <div><Child validatorSetter={ setChildValidator }/></div>
        <div><button type='submit'>Submit</button></div>
      </form>
    </div>
  );
};

子组件代码 #

interface ChildProps {
  text?: string,
  validatorSetter?: (validator: () => ValidatorRunner) => void
}

const Child = ({text, validatorSetter}: ChildProps) => {

  const [ textValue, setTextValue] = useState(text ?? "");
  const [ textFeedback, setTextFeedback] = useState("");

  useEffect(() => {
    if (validatorSetter) {
      validatorSetter(() => validate);
    };
  }, [validatorSetter]);
  
  const validate = (): boolean => {
    console.log("[Child]: validate " + textValue);
    let isValidText: boolean = validateText(textValue);
    return isValidText;
  }

  const validateText = (data: string): boolean => {
    if (data.length === 0) { 
      setTextFeedback("The text can't be empty");
      return false; 
    }
    else {
      setTextFeedback("");
      return true;
    }
  };

  const doChange = (e: ChangeEvent<HTMLInputElement>) => { 
    setTextValue(e.target.value);
    validateText(e.target.value);
  };

  return (
    <div style={{ border: '1px solid' }}>
      <label htmlFor="text">Text: </label>
      <input id="text" name='text' type='text' maxLength={ 16 } onChange={ doChange } value={ textValue }/>
      <button type="button" onClick={ validate }>?</button>
      <label> { textFeedback } </label>
    </div>
  );
};

问题原因 #

核心是闭包陷阱：Child组件初始化时，validate函数被通过validatorSetter传递给Parent，此时它捕获的是初始渲染时的textValue状态。后续Child组件状态更新时，validate函数会重新创建，但Parent的validatorSetter只在组件挂载时执行一次，导致Parent保存的始终是旧版本的validate函数，自然只能读到初始状态值。

解决方案 #

方案1：更新useEffect依赖，传递最新的validate函数 #

修改Child组件的useEffect，将validate加入依赖数组，确保每次validate更新时，Parent都能拿到最新的版本：

// Child组件中修改useEffect部分
useEffect(() => {
  if (validatorSetter) {
    validatorSetter(validate); // 直接传递validate函数，而非返回它的函数
  };
}, [validatorSetter, validate]); // 新增validate到依赖

同时调整Parent中childValidator的类型：

// Parent组件中修改状态定义
const [ childValidator, setChildValidator ] = useState<ValidatorRunner | undefined>();

方案2：用useRef跟踪最新状态值 #

在Child组件中用useRef保存textValue的最新值，这样无论validate函数是旧版本还是新版本，都能通过ref拿到当前状态：

// Child组件中新增ref定义
const textValueRef = useRef(text ?? "");

// 修改doChange函数，同步更新ref
const doChange = (e: ChangeEvent<HTMLInputElement>) => { 
  const newValue = e.target.value;
  setTextValue(newValue);
  textValueRef.current = newValue; // 同步更新ref
  validateText(newValue);
};

// 修改validate函数，使用ref中的值
const validate = (): boolean => {
  console.log("[Child]: validate " + textValueRef.current);
  let isValidText: boolean = validateText(textValueRef.current);
  return isValidText;
}

方案3：使用useImperativeHandle + forwardRef（推荐） #

这是React官方推荐的父子组件通信方式，用于父组件调用子组件的方法：

修改Parent组件

const Parent = () => {
  // 创建ref用于访问子组件方法
  const childRef = useRef<{ validate: () => boolean }>(null);

  function validateChild(): boolean {
    if (childRef.current) return childRef.current.validate();
    else return false;
  }

  // doSubmit函数保持不变

  return (
    <div>
      <form onSubmit={ doSubmit }>
        <div>Parent</div>
        <div><Child ref={childRef}/></div> {/* 传递ref */}
        <div><button type='submit'>Submit</button></div>
      </form>
    </div>
  );
};

修改Child组件

// 用forwardRef包裹组件，接收父组件传递的ref
const Child = forwardRef<{ validate: () => boolean }, Omit<ChildProps, 'validatorSetter'>>(({text}, ref) => {
  const [ textValue, setTextValue] = useState(text ?? "");
  const [ textFeedback, setTextFeedback] = useState("");

  const validate = (): boolean => {
    console.log("[Child]: validate " + textValue);
    let isValidText: boolean = validateText(textValue);
    return isValidText;
  }

  // 暴露validate方法给父组件
  useImperativeHandle(ref, () => ({
    validate
  }), [validate]); // 依赖validate，确保方法始终是最新的

  // validateText、doChange函数保持不变
  // 渲染内容保持不变
});

// 修复类型定义
Child.displayName = 'Child';

验证效果 #

修改后，点击Parent的Submit按钮调用子组件的validate函数时，就能正确获取到textValue的当前值，和点击Child内部的[?]按钮效果一致。

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