reactjs - 使用 props.initialize() 进行 Redux 形式的初始化

Question

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

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

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

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

然后就可以了!看来initialize()替换了整个对象并破坏了一些内部引用。

使用初始值似乎也可以正常工作。

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

Answer 1

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

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

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

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

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