React-Admin中条件渲染表单字段的值显示问题解析

在React-Admin项目开发中，表单处理是一个核心功能。近期在升级到v5.1.3版本后，开发者遇到了一个关于条件渲染表单字段值显示的特殊问题，这个问题涉及到React-Hook-Form的深度集成使用。

问题现象

当使用EditForm配合ArrayInput时，如果表单中存在条件渲染的字段，并且该字段设置了shouldUnregister: true属性，在满足渲染条件的情况下，字段虽然会被正确渲染，但其值却不会显示。这个问题在从v4.16.20升级到v5.1.3后出现，而两个版本都使用了React-Hook-Form v7.53.0。

技术背景分析

React-Admin的表单系统深度集成了React-Hook-Form。shouldUnregister是React-Hook-Form的一个重要配置项，它决定了当字段卸载时是否从表单状态中移除该字段的注册信息。这个设计原本是为了优化表单性能，避免维护不必要的字段状态。

在条件渲染场景中，当字段被隐藏时，如果设置了shouldUnregister: true，React-Hook-Form会从内部状态中完全移除该字段。而当字段再次显示时，需要重新注册并初始化值。

问题根源

经过技术团队深入排查，发现这个问题在开发环境的StrictMode下尤为明显。根本原因在于React-Hook-Form在处理ArrayInput内部的条件渲染字段时，当配合shouldUnregister使用时存在状态同步的时序问题。

特别是在以下复合条件下：

1. 使用ArrayInput管理动态数组字段
2. 数组项中包含条件渲染的字段
3. 条件渲染字段设置了shouldUnregister: true
4. 在编辑模式下初始化数据

React-Hook-Form在重新注册字段时未能正确恢复初始值，导致虽然DOM渲染了，但值没有正确显示。

解决方案

技术团队提出了几种解决方案：

1. 避免在ArrayInput中使用shouldUnregister
   这是React-Hook-Form官方文档中明确建议的做法，因为useFieldArray（ArrayInput的内部实现）的重新排序和挂载/卸载操作会与unregister行为产生冲突。

2. 使用transform属性清理数据
   更健壮的解决方案是利用Edit组件的transform属性，在提交前手动清理不需要的表单值。这种方式不依赖字段的卸载行为，而是主动控制数据流。

3. 调整开发环境配置
   由于问题在StrictMode下更明显，可以考虑在开发时暂时禁用StrictMode进行调试，但这不是生产环境的解决方案。

最佳实践建议

基于React-Hook-Form的设计理念和React-Admin的实现特点，我们推荐：

1. 对于简单的条件渲染字段，可以不使用shouldUnregister，依赖React-Hook-Form的默认行为
2. 对于复杂场景特别是ArrayInput中的字段，使用transform进行数据清洗
3. 保持React-Admin和React-Hook-Form版本的同步更新
4. 在条件渲染字段时，考虑使用keep-alive式的隐藏而非卸载

这个问题也提醒我们，在表单库深度集成时，需要特别注意各层抽象之间的交互行为，特别是在条件渲染和动态字段这样的复杂场景下。理解底层原理有助于找到最合适的解决方案。