react-admin中useFormContext()返回null但上下文存在的解决办法

核心原因 #

react-admin v4的SimpleForm基于内部封装的react-hook-form实现，它通过自身的上下文传递表单状态。直接使用第三方react-hook-form的useFormContext可能因模块实例不匹配（比如项目安装的react-hook-form版本与react-admin内部依赖版本不一致、重复安装依赖），导致无法正确获取上下文。

解决方案 #

方案1：使用react-admin封装的useForm钩子 #

react-admin的@react-admin/forms包提供了适配内部表单系统的useForm钩子，直接替换原有的useFormContext即可：

import { useForm } from '@react-admin/forms';

const MyComponent = () => {
  const { formState: { isValid } } = useForm();
  // 正常访问表单状态，无需担心空值崩溃
  return <></>;
};

方案2：排查依赖一致性 #

如果方案1无效，检查项目中是否存在多个react-hook-form实例：

• 执行命令npm ls react-hook-form查看依赖树，确认是否有重复安装的版本
• 若存在重复，删除node_modules和package-lock.json（或yarn.lock），重新执行安装命令，确保react-admin与项目依赖的react-hook-form版本兼容（react-admin 4.8.3依赖的react-hook-form版本为^7.39.0，你的7.40.0在兼容范围内）

方案3：直接访问react-admin内部FormContext #

作为备选，也可以直接导入并使用react-admin内部的表单上下文：

import { useContext } from 'react';
import { FormContext } from '@react-admin/forms';

const MyComponent = () => {
  const formContext = useContext(FormContext);
  if (!formContext) return null; // 增加空值判断避免崩溃
  const { formState: { isValid } } = formContext;
  return <></>;
};

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