Redux 表单在第二次提交时发送过时数据

Question

我有一个包含多个下拉菜单的页面，每个下拉菜单向服务器发送不同的数据。

<form onSubmit={handleSubmit(submitMember)}>
  <DropDown />
  <button type="submit">Apply changes</button>
  <DropDown />
  <button type="submit">Apply changes</button>
</form>


const mapStateToProps = (state, ownProps) => ({
  member: getFormValues(`${ownProps.form}`)(state)
})

export default connect(mapStateToProps)(reduxForm({ enableReinitialize: true })(MemberRow))

当我第一次提交时一切正常。但是当我第二次提交表单时，发送了第一次提交的过时数据。我检查了 redux 存储，这里的数据已更新。

Answer 1

添加 keepDirtyOnReinitialize: true 解决了问题。

export default connect(mapStateToProps)(reduxForm({ enableReinitialize: true, keepDirtyOnReinitialize: true })(MemberRow))

来自docs：

keepDirtyOnReinitialize : boolean [optional]

When set to true and enableReinitialize is also set, the form will retain the value of dirty fields when reinitializing. When this option is not set (the default), reinitializing the form replaces all field values. This option is useful in situations where the form has live updates or continues to be editable after form submission; it prevents reinitialization from overwriting user changes. Defaults to false.

Redux 表单在第二次提交时发送过时数据

Redux form sends outdated data on second submit

reactjs

react-forms