NextJS/React：能否将多个父组件状态合并到祖父组件单一状态中？

要实现将多个Parent组件的状态合并到Grandparent的单一状态中，核心思路是状态提升，把Parent的状态管理转移到Grandparent，同时让Parent作为受控组件接收状态和更新回调。具体实现如下：

1. 修改Parent组件 #

更新Props类型，添加parentId（标识当前Parent实例）和onStateChange（状态变化时通知Grandparent的回调），移除自身的状态管理，改为接收Grandparent传递的状态与更新方法：

import Child from "./Child"
import Child2 from "./Child2"

type Props = {
  parentId: string;
  currentState: Record<string, any>;
  onStateChange: (parentId: string, newState: Record<string, any>) => void;
}

const Parent: React.FC<Props> = ({ parentId, currentState, onStateChange }) => {
  const valuesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const name = e.target.name;
    let value: any;
    if (name === "bool") {
      value = e.target.checked;
    } else {
      value = e.target.value;
    }
    // 生成新状态并通知Grandparent
    const newState = { ...currentState, [name]: value };
    onStateChange(parentId, newState);
  };

  return (
    <>
      <div>{JSON.stringify({ values: currentState })}</div>
      <div>
        <Child valueChange={valuesChange} id="Text1" />
        <Child valueChange={valuesChange} id="Text2" />
        <Child2 valueChange={valuesChange} id="bool" />
      </div>
    </>
  );
};

export default Parent;

2. 修改Grandparent组件 #

在Grandparent中维护数组状态存储所有Parent的状态，实现状态更新函数，并渲染受控的Parent实例：

import { useState } from "react";
import { Button } from "@mui/material";
import Parent from "./Parent";

const Grandparent: React.FC = () => {
  // 初始化两个Parent的状态，用id区分实例
  const [parentsState, setParentsState] = useState([
    { id: "parent1", state: {} },
    { id: "parent2", state: {} }
  ]);

  const handleParentStateChange = (parentId: string, newState: Record<string, any>) => {
    setParentsState(prev => 
      prev.map(item => 
        item.id === parentId ? { ...item, state: newState } : item
      )
    );
  };

  const buttonClick = () => {
    // 提取所有Parent的状态组成目标数组
    const mergedData = parentsState.map(item => item.state);
    alert(`data: ${JSON.stringify(mergedData)}`);
  };

  return (
    <>
      {parentsState.map(parent => (
        <Parent
          key={parent.id}
          parentId={parent.id}
          currentState={parent.state}
          onStateChange={handleParentStateChange}
        />
      ))}
      <Button onClick={buttonClick}>Get Grandparent State</Button>
    </>
  );
};

export default Grandparent;

3. Child与Child2组件无需修改 #

这两个组件仅负责传递输入事件，原有逻辑保持不变即可。

效果说明 #

现在每个Parent的状态变化都会同步到Grandparent的parentsState数组中，点击按钮时会弹出格式为[{Parent1 state},{Parent2 state}]的合并状态，完全符合需求。

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