React登录页面出现Cannot read properties of undefined (reading '__H')错误求助

错误根源 #

"Cannot read properties of undefined (reading '__H')" 这个错误是因为你在React项目中混用了Preact的钩子API。Preact的useState/useRef依赖自身内部的上下文标识__H，而React环境中不存在这个标识，导致调用钩子时抛出错误。

从你的Login组件代码可以看到关键问题：

import { useState,useRef } from "preact/hooks"; // 错误：React项目应从react导入钩子

修复步骤 #

1. 替换钩子导入来源 #

将Preact的钩子导入替换为React官方钩子：

// 替换前
import { useState,useRef } from "preact/hooks";
import React from "react"

// 替换后
import React, { useState, useRef } from "react";

2. 修复userRef的无效使用 #

你的userRef没有绑定到任何DOM元素或组件，userRef.current始终为null，后续调用getApi()会触发新的错误。需要根据实际需求调整：

• 如果是要获取Calendar组件的API，需要把userRef绑定到Calendar组件上（但Login组件里仅导入了Calendar却未渲染，这属于逻辑疏漏）
• 如果是要操作AddUserModal的实例，需确认该组件是否暴露getApi()方法，并将ref绑定到它上面

示例（绑定到AddUserModal）：

// 在return中给AddUserModal添加ref
<AddUserModal 
  ref={userRef}
  isOpen={modalOpen} 
  onClose={() => setModalOpen(false)} 
  onUserAdded={event => onUserAdded(event)} 
/>

同时要确保AddUserModal组件支持ref传递（比如用forwardRef包裹组件）。

3. 清理不必要的依赖 #

如果你的项目没有实际使用Preact，直接卸载它避免环境冲突：

npm uninstall preact

额外优化点 #

登录按钮用NavLink包裹在button内会触发表单默认提交行为，建议修改为：

// 先导入useNavigate
import { useNavigate } from 'react-router-dom';

// 组件内初始化导航方法
const navigate = useNavigate();

// 替换按钮代码
<button type="button" onClick={() => navigate("/calendar")}>Connexion</button>

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