React.js中如何获取多个子组件的独立状态并汇总到父组件

• 实现目标：收集所有复选框子组件的勾选状态，统一存入父组件state，存储格式为键值对，键为分类-选项名格式的唯一标识，值为布尔值代表是否勾选；取消勾选时既可以将对应键值设为false，也可以直接删除该键。
• 异常表现：子组件内部勾选、取消勾选交互正常，但向上同步状态到父组件时，会出现同组选项重复写入state的冗余问题，比如蔬菜类选项被重复添加多次。

重复属性问题本质是状态更新逻辑错误：

1. 子组件向上传值时传递了整组选项的状态对象，父组件合并时没有做去重判断，直接将子组件传入的对象全量展开追加到旧state上
2. 状态更新时没有使用prevState回调做异步安全的更新，快速触发多次勾选操作时拿到了过期的旧状态，导致合并逻辑异常

传值约定 #

子组件触发状态变更时，不需要传递整组的全量状态，只需要传递两个最小粒度的参数即可：

• 当前操作项的唯一标识key（格式如Vegetables-Carrot）
• 当前项的最新勾选状态（布尔值）
  如果是分类全选/取消全选场景，额外传递当前分类下所有选项的key列表即可。

父组件更新逻辑 #

父组件维护统一的选中状态对象，所有更新都基于prevState做不可变修改，避免异步更新导致的状态异常。

方案1：取消勾选时保留键，值设为false #

// 单个选项变更处理
const updateSingleCheck = (itemKey, checked) => {
  setSelected(prev => ({
    ...prev,
    [itemKey]: checked
  }))
}

// 分类全选/取消处理
const updateCategoryCheck = (category, itemKeyList, categoryChecked) => {
  setSelected(prev => {
    const nextState = { ...prev }
    itemKeyList.forEach(key => {
      nextState[`${category}-${key}`] = categoryChecked
    })
    return nextState
  })
}

该方案实现最简单，不需要额外做删除操作，后续使用状态时过滤掉值为false的项即可。

方案2：取消勾选时直接删除对应键 #

如果不需要保留未勾选项的记录，可以在取消勾选时移除对应键，保持state对象精简：

// 单个选项变更处理
const updateSingleCheck = (itemKey, checked) => {
  setSelected(prev => {
    const nextState = { ...prev }
    checked ? nextState[itemKey] = true : delete nextState[itemKey]
    return nextState
  })
}

// 分类全选/取消处理
const updateCategoryCheck = (category, itemKeyList, categoryChecked) => {
  setSelected(prev => {
    const nextState = { ...prev }
    itemKeyList.forEach(key => {
      const fullKey = `${category}-${key}`
      categoryChecked ? nextState[fullKey] = true : delete nextState[fullKey]
    })
    return nextState
  })
}

注意：不要直接修改prevState原对象，必须先做浅拷贝生成新对象再修改，否则会破坏React的不可变数据原则，引发渲染不生效、状态比对异常等问题。

• 不要让子组件上传整组状态对象做全量合并，最小粒度传值能从根源上避免大部分重复属性问题
• 不要在setState外部先读取当前state值拼接后再传入更新，React状态更新为异步批处理机制，连续触发更新时会拿到过期的state值，必须使用prevState回调的写法保证拿到最新的前序状态
• 所有选项的key必须保证全局唯一，避免不同分类下同名选项出现状态覆盖错误

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