Next/React：如何正确整合多个子组件的状态

问题核心是状态更新时未对嵌套层级的对象做合并处理，直接替换了同个父ID下的整个对象。要实现状态合并，需在更新时保留原有父ID下的所有属性，再添加新字段值。

修改Grandparent组件中的handleChange函数，用函数式更新获取前一次状态，对嵌套对象做深一层的展开合并：

const handleChange = (parentId: string, fieldName: string, value: any) => {
  setFormState(prevState => ({
    ...prevState,
    values: {
      ...prevState.values,
      [parentId]: {
        // 保留当前父ID下已有的所有属性，若无则用空对象初始化
        ...(prevState.values[parentId] || {}),
        // 添加/更新当前字段的值
        [fieldName]: value
      }
    }
  }));
};

修改后，当你更新id为0的Parent组件中的Text2时，会先保留该父ID下已有的Text1: "test"属性，再合并新的Text2: "test"，最终得到期望的状态：
{"values":{"0":{"Text1":"test", "Text2":"test"},"1":{"bool":true}}}

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