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

Question

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

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

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

但是如果我开始填写表格，并且我决定更改 UI 的语言（通过监听将更新我的 lang 和 messages 道具通过我的 redux 商店），正在重置表单：-/

我看到语言更改时触发了操作 redux-form/INITIALIZE。

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

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

有什么想法吗？

我的代码：App.js + Register form

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

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

My redux-form is reinitialized when switching language by changing react-intl wrapper props

reactjs

redux

redux-form

react-intl