React：点击父组件按钮保存所有子组件状态至祖父组件数组

错误原因 #

你当前代码里的核心问题是ParentComponent仅使用了单个ref，在遍历渲染ChildComponent时，每个子组件都会覆盖这个ref的引用，最终ref.current只会指向最后一个渲染的子组件。点击按钮时，只有最后一个子组件的setArray方法被调用，自然只能保存它的状态。

修复现有代码（基于Ref的方式） #

将单个ref改为ref数组，存储所有子组件的引用，点击时遍历所有子组件收集状态：

const GrandParentComponent = () => {
  const [array, setArray] = useState([]);

  return (
    <div>
      <ParentComponent array={array} setArray={setArray} />
    </div>
  );
};

const ParentComponent = ({ array, setArray }) => {
  // 用ref数组存储所有子组件引用
  const childRefs = useRef([]);
  
  const handleClick = () => {
    // 遍历所有子组件，收集状态并更新祖父组件数组
    const newChildStates = childRefs.current.map(ref => ref.getState());
    setArray(prev => [...newChildStates, ...prev]);
  };
  
  return (
    <div>
      <button onClick={handleClick}>save</button>
      {array.map((item, index) => (
        <ChildComponent 
          key={index}
          ref={el => childRefs.current[index] = el} 
        />
      ))}
    </div>
  );
};

const ChildComponent = forwardRef((props, ref) => {
  const [childState, setChildState] = useState("")
  
  useImperativeHandle(ref, () => {
    return {
      // 仅暴露获取状态的方法，避免直接修改父级状态
      getState: () => ({ ...childState })
    };
  });

  return <div>ChildComponent</div>;
});

更优实现方式（遵循React单向数据流） #

放弃refs操作子组件，改为通过回调让子组件将状态同步到父组件，由父组件统一管理所有子组件状态，更符合React设计理念：

const GrandParentComponent = () => {
  const [array, setArray] = useState([]);

  const handleSaveStates = (childrenStates) => {
    setArray(prev => [...childrenStates, ...prev]);
  };

  return (
    <div>
      <ParentComponent 
        array={array} 
        onSaveStates={handleSaveStates} 
      />
    </div>
  );
};

const ParentComponent = ({ array, onSaveStates }) => {
  // 父组件维护所有子组件的状态
  const [childrenStates, setChildrenStates] = useState(
    array.map(() => "")
  );

  const handleClick = () => {
    // 直接将收集好的子组件状态传给祖父组件
    onSaveStates(childrenStates);
  };

  const updateChildState = (index, newState) => {
    setChildrenStates(prev => {
      const updatedStates = [...prev];
      updatedStates[index] = newState;
      return updatedStates;
    });
  };
  
  return (
    <div>
      <button onClick={handleClick}>save</button>
      {array.map((item, index) => (
        <ChildComponent 
          key={index}
          value={childrenStates[index]}
          onChange={(val) => updateChildState(index, val)}
        />
      ))}
    </div>
  );
};

const ChildComponent = ({ value, onChange }) => {
  return (
    <input 
      type="text" 
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder="输入内容"
    />
  );
};

这种方式无需使用useImperativeHandle，代码逻辑更清晰，状态流转可追溯，也避免了ref操作带来的潜在问题。

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