React中如何在子组件获取并更新父组件对象状态的布尔值？

你之前的写法错误在于，把布尔字段的值直接设成了一个函数，而没有利用React状态更新的函数式回调特性。当更新对象类型的状态时，函数式更新需要给setState传递一个接收前一次完整状态的回调函数，而非单个字段的prev值。

正确的布尔字段切换写法 #

直接给setFormData传入回调函数，基于前一次的完整状态对象进行更新：

setFormData(prevFormData => ({
  ...prevFormData, // 保留其他所有字段
  agreement2: !prevFormData.agreement2 // 对目标布尔字段取反
}))

子组件中结合事件的示例 #

如果是子组件里的复选框触发切换，代码可以这样写：

// 子组件内的复选框元素
<input
  type="checkbox"
  checked={formData.agreement2}
  onChange={() => {
    setFormData(prev => ({
      ...prev,
      agreement2: !prev.agreement2
    }))
  }}
/>

额外建议：统一使用函数式更新更安全 #

即使是普通字符串字段，也推荐用函数式更新的方式，避免闭包导致的过期状态问题：

// 普通字段的函数式更新写法
setFormData(prev => ({
  ...prev,
  firstName: e.target.value
}))

内容的提问来源于stack exchange，提问作者Mel Carlo Iguis