React中如何为map生成的多个textarea元素添加ref？代码报错求助

你的代码报错核心原因是违反了React Hooks的调用规则：Hooks必须在组件的顶层作用域调用，不能放在for循环这类条件/循环语句里。每次组件渲染时，for循环都会执行，导致useRef的调用顺序不稳定，触发React的Hooks校验报错。

正确实现方式 #

用单个useRef创建一个数组容器，通过函数式ref动态存储每个textarea的DOM引用：

export default function RenderPages({storage, setStorage, state, setState}){
  // 用useRef创建一个数组来存储所有textarea的ref
  const elRefs = useRef([]);

  // 确保数组长度和content匹配，避免多余的旧引用
  const contentLength = storage[state.currentFolderId][state.currentFileId].content.length;
  if (elRefs.current.length !== contentLength) {
    // 重置数组到对应长度，空位置用undefined填充
    elRefs.current = Array(contentLength).fill(undefined);
  }

  const onChange = (e, index) => {
    // 示例onChange逻辑：更新storage中的对应内容
    const newContent = [...storage[state.currentFolderId][state.currentFileId].content];
    newContent[index] = e.target.value;
    setStorage(prev => ({
      ...prev,
      [state.currentFolderId]: {
        ...prev[state.currentFolderId],
        [state.currentFileId]: {
          ...prev[state.currentFolderId][state.currentFileId],
          content: newContent
        }
      }
    }));
  };

  return (
    <>
      {renderable ? (
        <div className="writing">
          {storage[state.currentFolderId][state.currentFileId].content.map((page, index) => (
            <div className='textarea' key={index}>
              {/* 使用函数式ref，将当前textarea元素存入数组对应位置 */}
              <textarea
                ref={el => elRefs.current[index] = el}
                placeholder='write here'
                value={page}
                id={`page${index}`}
                onChange={(e) => onChange(e, index)}
                rows={rows}
                cols={cols}
              ></textarea>
            </div>
          ))}
        </div>
      ) : null}
    </>
  )
}

关键说明 #

• 用useRef([])创建数组容器，elRefs.current作为存储ref的数组，不会触发组件重新渲染
• 函数式ref={el => elRefs.current[index] = el}：每次textarea渲染时，自动将DOM元素赋值到数组对应索引位置，符合React渲染逻辑
• 长度校验逻辑：确保数组长度与content匹配，避免组件更新后残留旧的ref引用

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