我有一个 React 应用程序，其中包含一个表单，该表单在服务器端呈现，并预先填充了用户正在进行的工作。问题是，如果用户在应用程序加载之前编辑表单中的值，则应用程序不会意识到更改。当用户保存时，服务器呈现的未更改的数据将被重新保存，并且用户的新数据将被删除，尽管它仍然显示在表单中。简而言之，React 和最初加载时替换的标记中的输入值之间似乎存在脱节。

我想我可以在每个输入上放置引用并将它们的值复制到 componentDidMount 上的应用程序状态中，但必须有更好的方法。有其他人解决过这个问题吗？

更新

我现在认为解决这个问题的最佳方法是让 React 在创建校验和时考虑输入值。 GH问题:https://github.com/facebook/react/issues/4293

请您参考如下方法:

I suppose I could put refs on every input and copy their values into the application state on componentDidMount, but there has got to be a better way. Has anyone else solved this problem?

浏览器自动填充字段或在刷新时记住以前的值也可能导致实际上相同的问题 - 您的应用的数据 View 与用户的数据 View 不同。

我过去的强力解决方案是从输入中提取完整的表单状态 onSubmit并在允许提交继续之前重新运行验证。

使用componentDidMount正如您所建议的，听起来像是一个更优雅的解决方案，因为它可以避免用户输入无效数据并允许在收到任何警告之前尝试提交数据。您不需要添加 ref不过，对于每个输入；只需在<form>中添加1即可并使用其 .elements collection提取所有数据。

建议的解决方案:

1. 在 componentDidMount() ，从 .elements 中提取表单数据(为此，我从表单库中提取了 get-form-data)
2. 根据应用的状态检查每个字段的当前值。
3. 如果字段的当前值不同，请像对待通过事件到达的新用户输入一样对待它 - 更新它的状态并重新运行任何关联的验证例程。

然后来自 componentDidMount()从此以后，您的应用和用户将始终位于同一页面(字面意思)。