Question

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

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

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

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

使用props.initialize（）进行Redux-form初始化

1 个答案: