Question

我将我的应用程序包裹在IntlProvider v2的react-intl内，如下所示：

<IntlProvider locale={this.props.lang} messages={this.props.messages}>

我的react-form表格在树下。一切都很棒。

但是，如果我开始填写表单，我决定更改用户界面的语言（通过听取通过我的redux更新我的lang和messages道具的操作表格正在重置： - /

我看到当lang发生变化时会触发行动redux-form/INITIALIZE。

即使我将destroyOnUnmount: false传递给reduxForm()，也会发生这种情况。

不受控制的表单字段不会发生。

有什么想法吗？

我的代码：App.js + Register form

Answer 1

将react-relay与redux-form合并后，我们遇到了同样的问题。解决方案很简单：我们在安装表单时初始化表单。

compose(
  createContainer({
    fragments: {
      viewer: () => Relay.QL`
        fragment on User {
          nickname
          email
        }
      `
    }
  }),
  reduxForm({
    form: "user",
    fields: ["nickname", "email"],
  })
)(
  class UserForm extends Component {
    componentWillMount() {
      this.props.initializeForm(this.props.viewer)
    }

    render() {
      // Same as before
    }
  }
)

Answer 2

嗯......您正在更改initialValues道具，因此它正在初始化表单数据。 initialValues旨在用于来自要编辑的服务器的规范数据（例如，已加载的记录），而不是用于从组件外部更新单个表单值。

也许您可以使用plugin() API来注意语言更改操作（通过Redux进行更改？）并更新表单中的lang值？

通过更改react-intl包装器道具来切换语言时，我的redux-form被重新初始化

2 个答案: