【开发踩坑日记】动态表单场景切换与数据持久化问题

问题背景

在实际开发中，我们经常会遇到需要根据不同场景展示不同表单字段的需求。比如在一个系统的填单界面中：

• A场景下需要展示a、b、c三个字段
• B场景下需要展示d、e、f三个字段

这种动态表单的设计虽然灵活，但在实际开发中却遇到了一系列问题：

1. 场景切换时表单字段展示混乱
2. 数据持久化时字段丢失
3. 默认值处理不当

问题分析

1. 场景切换问题

最初的问题出现在编辑界面：在A场景下保存数据后，点击编辑按钮时，B场景的字段也显示出来了。通过问题复现发现，这是因为编辑界面的联动逻辑未完善，导致场景切换时表单字段展示混乱。

2. 数据持久化问题

在完善联动逻辑后，又发现了新的问题：

• 场景切换时，原场景的数据未被清空
• 切换到新场景后，保存时原场景的字段被清空
• 使用updateByPrimaryKeySelective导致默认值处理不当

解决方案

1. 完善场景切换逻辑

// 场景切换时清空表单数据
const handleScenarioChange = (newScenario) => {
  form.resetFields(); // 清空表单
  setCurrentScenario(newScenario); // 更新当前场景
  loadScenarioFields(newScenario); // 加载新场景的字段
};

2. 优化数据持久化方案

1. 前端处理：

   • 保存时传递全量数据
   • 为未填写的字段设置合理的默认值
   • 避免使用null或undefined作为默认值

2. 后端处理：

   • 将updateByPrimaryKeySelective改为updateByPrimaryKey
   • 确保所有字段都能被正确更新
   • 避免字段被意外清空

总结与思考

1. 动态表单设计要点：

   • 场景切换时及时清空表单数据
   • 保持表单状态的一致性
   • 合理处理默认值

2. 数据持久化最佳实践：

   • 明确区分必填字段和选填字段
   • 谨慎使用选择性更新
   • 保持前后端数据一致性

3. 开发建议：

   • 在开发动态表单时，需要全面考虑场景切换的各种情况
   • 数据持久化时要考虑字段的完整性
   • 合理使用ORM框架的特性，避免数据丢失

参考资料

• MyBatis官方文档：https://mybatis.org/mybatis-3/
• React表单处理最佳实践
• 动态表单设计模式

注：本文为个人开发经验总结，如有错误或建议，欢迎指正交流。