React：在收到服务器更新时保持本地表单更改

Question

UI 表单：我有一个表单，其中填充了加载数据。

服务器更改：上面提到的相同数据通过其他方式在服务器中被修改，并且服务器推送带有更新数据的wamp通知。

正常场景：一旦从服务器接收到更新，UI 表单将使用服务器发送的更新进行更新。比如，如果 Department 是 Engineering 并且服务器发送 Department 是 Mechanical 的更新，那么 UI 表单字段 Department 将更新为显示 Mechanical。

用户与表单交互场景：现在用户更改了表单数据并准备提交，但是在用户提交数据之前，服务器更新带来了变化。然后 UI 表单应该忽略该特定字段上的服务器更新。例如，Department 正在显示 Engineering，用户将其更改为 Management。更改后，部门的服务器更新带有值 Mechanical，UI 应忽略此更新并保持用户更改不变。

Catch：表单上可能有 10 多个字段可供用户更改。比方说，除了 Department，还有一个值为 Delhi 的 Location 字段。用户决定将 Department 更改为 Management，保持 Location 不变。现在服务器更新带来了变化，部门字段为机械和位置字段为孟买。现在 UI 不应解决部门的服务器更新，但应更新位置的服务器更新并将位置更改为孟买。

这样页面上可能会有很多字段，根据用户的变化，是否进行服务器更新待定。

解决方案： 我想出了两种方法，

1. 其中 UI 将保留 2 份状态副本，一份是原始的，一份是用户更改后的。因此，一旦收到服务器更新，将比较两者，如果用户有任何更改，则跳过它，否则使用服务器更新更新 UI。
2. 只要用户在任何字段中进行任何更改，UI 就会创建一个具有更改值的对象。收到服务器更新时，将比较更改的值并用用户更改的值覆盖服务器更新。

Doubt：我对这种情况很陌生，所以在采取任何解决方案之前，只想确保我正在采取正确的方法。有人可以验证哪种方法更好吗？或者如果你遇到过类似的需求并且有什么解决办法，欢迎分享。 如果你能分享，任何博客，解释这个问题和讨论解决方案将非常有帮助。