Question

我已经使用初始值检查了reduxForm的示例代码，他们的代码与我的代码之间的唯一区别是以下代码块。

我的代码 （不适用于initialValues）

function mapStateToProps(state) {
  return{
    initialValues: state.account.data
  };
}

export default reduxForm({
  form:'initializeFromState'
})(connect(mapStateToProps,{load: loadAccount})(InitializeFromStateForm));

他们的代码 （适用于InitialValues） Taken from here

InitializeFromStateForm = reduxForm({
  form: 'initializeFromState', // a unique identifier for this form
})(InitializeFromStateForm);

// You have to connect() to any reducers that you wish to connect to yourself
InitializeFromStateForm = connect(
  state => ({
    initialValues: state.account.data, // pull initial values from account reducer
  }),
  { load: loadAccount }, // bind account loading action creator
)(InitializeFromStateForm);

export default InitializeFromStateForm;

我改变了他们的connect（）和reduxForm的代码，有趣的是，initialValues停止了工作，现在我的问题是代码是不同的？如果不同的我的代码有什么问题吗

感谢。

Answer 1

是的，虽然存在细微差别，但您使用connect然后使用ReduxForm包装组件，但它应该是相反的方式

将您的代码更改为

export default connect(mapStateToProps,{load: loadAccount})(reduxForm({
  form:'initializeFromState'
})(InitializeFromStateForm));

它应该有效

Answer 2

不同之处在于react-redux连接HoC和redux-form HoC相互包裹的顺序。

在您的代码中，redux-form包装了连接HoC，initialValues不会传递给表单，而是传递给内部组件。表单用值初始化，内部组件（你的）忽略它们。

道具流：redux-form - ＆gt; connect - initialValues - ＆gt;成分

在他们的代码中，connect包含redux-form，initialValues被传递给redux-form HoC（表单）。表单使用值初始化。

道具流：连接 - initialValues - ＆gt; redux-form - ＆gt;成分

React - 使用reduxForm的两个语句之间的差异

2 个答案: