使用 props.initialize() 初始化 Redux 表单

Question

我们最近在使用 redux-form（使用 6.7.0）时遇到了一些奇怪的行为。我们使用如下代码初始化 componentDidMount()/componentWillMount() 中的数据：

componentWillMount() {
    this.props.initialize({type:'http',field:'A Value'});
    ...
}

但是，只有当我们执行这个初始化代码时，我们的提交函数才不会接收正在编辑的值，而是初始值。此外，在编辑值时不再调用 onChange() 侦听器。另一方面，位于 form/myform 中的状态已正确更新，我可以看到那里正在更新值。如果我将调用 initialize() 替换为对更改操作的 dispatch()，对于每个属性：

this.props.dispatch(change("myform","type",'http'));
this.props.dispatch(change("myform","field",'A Value'));

然后它起作用了！。似乎 initialize() 替换了整个对象并破坏了一些内部引用。

使用 initialValues 似乎也能正常工作。

很多例子都在使用 props.initialize()，但我们无法让它工作。在什么情况下应该调用 props.initialize() ？

Answer 1

我必须在页面加载时使用数据库中的现有数据填充表单，并在进行更改时更新它们。下面的方法对我来说效果很好。

确保将enableReinitialize&的值设置keepDirtyOnReinitialize为true

export default reduxForm({
    validate,
    form : 'YourFormName',
    enableReinitialize: true,
    keepDirtyOnReinitialize : true
})(connect(mapStatetoProps, { actionReducers }(YourClassName))

和火this.props.intialize()从ComponentDidMount()。现在使用状态来确保它只发生一次，而不是每次更新任何组件时。

componentDidMount(){
   this.props.dispatch(actionReducer(parameter)).then(()=>{
      this.props.initialize(this.props.data)
      this.setState({load:true})
   })
}