React：多个子组件同时触发父回调时如何正确更新父组件state

数据老陈

2026-10-10

问题根因

状态丢失核心是两个原因：
setValidations 调用时使用了闭包捕获的旧validations快照，多个子组件同时触发更新时，所有更新都基于同一个初始旧状态，后续更新会直接覆盖前面的更新结果
提交校验时状态更新是异步的，触发校验后同步读取validations，拿到的还是更新前的旧值

可行解决方法

方法1：修改为setState函数式更新（最小改动）

把onValidation里的setValidations改为函数式写法，每次更新都基于上一次最新的状态，避免闭包旧值导致的覆盖问题：

function onValidation(isValid, key) {
  // 用函数式更新，参数prev是当前最新的validations状态
  setValidations(prev => ({...prev, [key]: isValid}));
}

同时要解决提交时异步读状态的问题：触发校验后不能马上读validations，可以监听validations的长度，等所有字段都返回校验结果后再做判断，适配你提到的「传递递增数值触发子组件校验」的场景：

function Form() {
  const [validations,setValidations] = useState({})
  // 用来触发子组件校验的递增数值
  const [submitTrigger, setSubmitTrigger] = useState(0);
  // 表单总输入项数量
  const totalFields = 4;

  function onValidation(isValid,key) {
    setValidations(prev => ({...prev, [key]: isValid}));
  }

  function onSubmit(e){
    e.preventDefault();
    // 先清空上次校验结果
    setValidations({});
    // 递增值触发所有子组件校验
    setSubmitTrigger(prev => prev + 1);
  }

  // 监听校验结果变化，所有字段校验完成后再判断表单是否合法
  useEffect(() => {
    if (Object.keys(validations).length === totalFields) {
      const isValid = Object.values(validations).every(Boolean);
      if(isValid) {
        window.alert("The form is valid");
      }else {
        window.alert("The form is not valid");
      }
    }
  }, [validations, totalFields])

  return (
    <form onSubmit={onSubmit}>
      <Input name="first" submitTrigger={submitTrigger} onValidation={onValidation}/>
      <Input name="second" submitTrigger={submitTrigger} onValidation={onValidation}/>
      <Input name="third" submitTrigger={submitTrigger} onValidation={onValidation}/>
      <Input name="fourth" submitTrigger={submitTrigger} onValidation={onValidation}/>
      <button type="submit">提交</button>
    </form>
  )
}

// 子组件监听submitTrigger变化触发校验
function Input({name, submitTrigger, onValidation}) {
  const [value, setValue] = useState('')
  // 监听提交触发信号，执行校验
  useEffect(() => {
    if (submitTrigger > 0) {
      onValidation(!!value, name)
    }
  }, [submitTrigger, value, name, onValidation])

  return (
    <input type="text" onChange={e => setValue(e.target.value)} value={value} />
  )
}

方法2：状态提升统一校验（最佳实践）

更稳妥的方案是把所有输入框的 value 都提升到Form组件统一管理，提交时直接在父层一次性做所有校验，完全避免子组件异步回调更新状态的问题：

function Form() {
  const [formValues, setFormValues] = useState({
    first: '',
    second: '',
    third: '',
    fourth: ''
  });

  function onSubmit(e) {
    e.preventDefault();
    // 直接在父层统一校验所有字段，没有异步问题
    const isFormValid = Object.values(formValues).every(Boolean);
    if(isFormValid) {
      window.alert("表单校验通过");
    }else {
      window.alert("表单存在未填项");
    }
  }

  function handleChange(val, key) {
    setFormValues(prev => ({...prev, [key]: val}))
  }

  return (
    <form onSubmit={onSubmit}>
      <Input name="first" value={formValues.first} onChange={handleChange}/>
      <Input name="second" value={formValues.second} onChange={handleChange}/>
      <Input name="third" value={formValues.third} onChange={handleChange}/>
      <Input name="fourth" value={formValues.fourth} onChange={handleChange}/>
      <button type="submit">提交</button>
    </form>
  )
}

function Input({name, value, onChange}) {
  return (
    <input type="text" name={name} value={value} onChange={e => onChange(e.target.value, name)} />
  )
}

React：多个子组件同时触发父回调时如何正确更新父组件state

方法1：修改为setState函数式更新（最小改动） #

方法2：状态提升统一校验（最佳实践） #

方法1：修改为setState函数式更新（最小改动）

方法2：状态提升统一校验（最佳实践）