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

Question

我将我的应用程序包装在IntlProviderfrom react-intl v2中，如下所示：

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

我把我的react-form表格放在树下。一切都很好。

但是，如果我开始填写表格，并且我决定更改 UI 的语言（通过监听将通过我的 redux 存储更新我的lang和messages道具的操作），则表格将被重置：-/

我看到redux-form/INITIALIZE当 lang 改变时触发的动作。

即使我传递destroyOnUnmount: false给它也会发生reduxForm()。

不受控制的表单字段不会发生这种情况。

任何想法？

我的代码：App.js +注册表单

Answer 1

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

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

Answer 2

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
    }
  }
)