React中无法向含useRef的对象数组追加元素的解决方案咨询

我用于渲染垂直进度表单的state对象如下：

const [methodology, setMethodology] = useState([
  {
    index: "3.1",
    title: "Review Methodology",
    ref: useRef(null),
    component: <Methodology handleAddMethodology={() => {}} />,
  },
]);

点击新增按钮时，希望向现有state中追加一个类似对象，理想输出如下：

[
    {
      index: "3.1",
      title: "Review Methodology",
      ref: useRef(null),
      component: <Methodology handleAddMethodology={() => handleNewMethodology()} />,
    },
    {
      index: "3.2",
      title: "Review Methodology",
      ref: useRef(null),
      component: <Methodology handleAddMethodology={() => handleNewMethodology()} />,
    }
]

我尝试了以下代码但无法生效，原因是不能在回调函数中使用useRef：

const handleNewMethodology = () => {
  const newMethodology = {
    index: `3.${methodology.length + 1}`,
    title: "New Methodology",
    ref: useRef(null),
    component: <Methodology handleAddMethodology={HandleAddMethodology} />,
  };
  setMethodology([...methodology, newMethodology]);
};

请问该问题的理想解决方案是什么？

1. 核心问题：违反React Hooks规则 #

React Hooks必须在组件的顶层作用域调用，不能在事件处理函数、循环、条件判断等嵌套逻辑中使用，这是你代码失效的直接原因。

2. 优化方案：分离状态与组件引用 #

不要将ref存入state（state应存储渲染所需的业务数据，ref属于组件实例/DOM的引用，不属于状态范畴），改用一个顶层的ref数组来管理所有动态添加的组件引用，同时简化state的结构。

完整实现代码如下：

import { useState, useRef, forwardRef } from 'react';

// 用forwardRef包裹函数组件，支持传递ref
const Methodology = forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      <h3>{props.title} ({props.index})</h3>
      {/* 组件内部表单内容 */}
      <button onClick={props.handleAddMethodology}>添加新方法</button>
    </div>
  );
});

const ProgressForm = () => {
  // 仅存储业务状态数据：索引、标题
  const [methodology, setMethodology] = useState([
    { index: "3.1", title: "Review Methodology" },
  ]);

  // 顶层ref数组，用于管理所有动态组件的引用
  const methodologyRefs = useRef([]);

  const handleNewMethodology = () => {
    const newItem = {
      index: `3.${methodology.length + 1}`,
      title: "Review Methodology",
    };
    // 使用函数式更新确保获取最新的state
    setMethodology(prevState => [...prevState, newItem]);
  };

  return (
    <div>
      {methodology.map((item, idx) => (
        <Methodology
          key={item.index}
          ref={el => methodologyRefs.current[idx] = el}
          index={item.index}
          title={item.title}
          handleAddMethodology={handleNewMethodology}
        />
      ))}
      {/* 全局新增按钮（可选） */}
      <button onClick={handleNewMethodology}>新增方法项</button>
    </div>
  );
};

export default ProgressForm;

方案说明 #

• 简化state结构：state只保留渲染必需的业务数据，避免存储ref、组件实例这类非状态数据，让状态管理更清晰。
• 顶层ref数组管理引用：在组件顶层创建methodologyRefs数组，通过map渲染时的索引，将每个组件的ref绑定到数组对应位置，后续可通过methodologyRefs.current[idx]访问指定组件的实例。
• forwardRef传递引用：如果Methodology是函数组件，必须用forwardRef包裹才能接收父组件传递的ref；如果是类组件，可直接使用ref属性。

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