FormContext 返回“null”本地 SimpleForm 内

发布于 2025-01-16 20:32:37 字数 845 浏览 1 评论 0原文

希望有人能指出我正确的方向来尝试调试这个问题。

我正在将使用react-admin构建的应用程序重构为版本4.0.0.beta-3。但我的自定义表单都无法正常工作。也就是说,当我调用任何新的react-hook-form方法(例如“useFormContext”)时,我会返回null。当我尝试使用“useWatch”获取表单值时,我收到一条错误消息“无法读取 null 的属性(读取“control”)”

根据react-hook-form 的文档,这可能表明该元素没有被读取与 FormContext 一起提供。但是,当我构建一个codesandbox来验证问题时,useWatch可以正常工作并返回表单值。 (这是codesandbox: https:/ /codesandbox.io/s/crazy-violet-qk7uyh?file=/src/test-resource/TestResourceCreate.tsx

如果我将代码几乎逐行复制到我的本地环境中,它崩溃了,当我调用 useWatch 时寻找“控制”。

我尝试删除node_modules并重新安装,我已经在7.27.0安装了react-hook-form(react-admin正在使用的指定版本),但我还没有找到解决方案。

任何有关下一步该做什么/尝试的建议,或者我当地可能出现的问题,将不胜感激。谢谢!

编辑:作为附录:当我使用react-admin表单组件“FormDataConsumer”时,表单值在道具“formData”中正确传递。

Hoping someone can point me in the right direction to try to debug this issue.

I'm refactoring an application built with react-admin to version 4.0.0.beta-3. But none of my custom forms are working correctly. Namely, when I call any of the new react-hook-form methods, like "useFormContext", I get back null. When I try to get the form values using "useWatch", I get back an error saying 'Cannot read properties of null (reading 'control')'

According to react-hook-form's docs, this may indicate that the element is not being provided with FormContext. However, when I built a codesandbox to verify the issue, useWatch works correctly and returns the form values. (Here is that codesandbox: https://codesandbox.io/s/crazy-violet-qk7uyh?file=/src/test-resource/TestResourceCreate.tsx )

If I copy the code nearly line-for-line into my local environment, it breaks, looking for "control" when I call useWatch.

I've tried deleting node_modules and reinstalling, I've installed react-hook-form at 7.27.0 (the stated version react-admin is using), but I have not found a solution.

Any suggestions for what to do/try next, or what could be wrong with my local, would be very much appreciated. Thanks!

EDIT: As an addendum: When I use the react-admin form component "FormDataConsumer", the form values are correctly passed in the prop "formData".

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

李不 2025-01-23 20:32:37

为后代回答我自己的问题:

重构我的应用程序以避免在运行“npm install”时标记 --legacy-peer-deps 后,我能够按照我的反应中的预期使用 useFormContext 和所有其他react-hook-form方法- 管理自定义表单。

我知道唯一需要遗留对等依赖的包是在 16.9.0 安装 React,而我的应用程序的其余部分依赖于 17.0.2。我不确定这是否是我的问题的根源,或者是否安装了其他一些遗留对等点,导致其他地方的导入不正确。如果任何有更多经验的人想要分享一些对可能发生的情况的见解以帮助未来的搜索者,请成为我的客人。

Answering my own question for posterity:

After refactoring my application to avoid having to flag --legacy-peer-deps on running "npm install", I was able to use useFormContext and all other react-hook-form methods as expected inside my react-admin custom forms.

The only package I'm aware of that required a legacy peer dependency was installing React at 16.9.0 while the rest of my application relied on 17.0.2. I'm unsure if that was source of my issue or if some other legacy peer was being installed that resulted in an incorrect import somewhere else. If anyone with more experience wants to share some insight into what could have been occurring to as to helper future searchers, be my guest.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文