如何使用Hooks在React JS表单输入中保存嵌套对象并解决实体分离报错

错误根因 #

detatched entity passed to persist是JPA/Hibernate框架的典型报错，核心原因是你赋值给product的category对象没有被当前持久化上下文管理：你在前端直接构造了仅携带categoryId的全新普通对象，后端拿到该对象后不属于持久化上下文的托管范围，当你尝试持久化product时，如果product和category的关联配置了级联持久化规则，JPA就会尝试把这个游离的category对象写入数据库，触发报错。

解决方案 #

• 优先使用托管状态的category对象做关联：后端拿到前端传的categoryId后，先调用DAO层接口根据ID查询对应的分类实体，再把查询到的托管对象赋值给product的category属性，之后再保存product即可。如果不想额外触发数据库查询，可使用JPA的getReferenceById()（旧版本叫getOne()）方法获取代理对象，不需要实际查库就能完成关联。
• 检查实体类的关联注解配置：确认@ManyToOne注解上是否添加了不必要的cascade = CascadeType.PERSIST/cascade = CascadeType.ALL属性，如果你不需要在保存product时自动新增分类，删掉这些级联规则，JPA就不会尝试持久化关联的category对象，只要数据库中存在对应ID的分类就能正常关联保存。
• 核对字段映射是否匹配：确认后端Category实体的主键字段名是否和前端传的categoryId一致，如果分类的主键字段实际为id，前端要将赋值逻辑改为setProduct({ ...product, category: { id: e.target.value } })，避免传空主键触发异常。

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