使用 state 到 props 初始化 redux 表单控件

Question

使用的包

"react-redux": "^5.0.6",
"redux-form": "^8.2.5",
"react": "^16.4.2",

这是组件

class EditProfileForm extends Component {
 return(
       <div>
       <Field name="firstName" component="input" >
       </div>
      )
}

EditProfileForm = reduxForm({    
    form: 'EditProfileForm'
})(EditProfileForm);

const mapStateToProps = state => ({
  initialValues: state.profile.firstName
})

export default connect(mapStateToProps)(EditProfileForm);

面临的问题：

Invariant Violation: You must pass a component to the function returned by connect. Instead received {"displayName":"ReduxForm","defaultProps":{"touchOnBlur":true,"touchOnChange":false,"persistentSubmitErrors":false,"destroyOnUnmount":true,"enableReinitialize":true,"keepDirtyOnReinitialize":false,"updateUnregisteredFields":false,"pure":true,"forceUnregisterOnUnmount":false,"submitAsSideEffect":false,"form":"EditProfileForm"}}

Answer 1

你的组件不正确，请举个例子

class EditProfileForm extends React.Component {
  render() {
    return (
      <div>
       <Field name="firstName" component="input"/>
      </div>
    )
  }
}

Answer 2

你的组件有两个错误

1) 您正在使用 class 组件，这意味着它需要使用 render 方法扩展 Component（您已经完成） （你错过了这个），这将 return JSX 标记。

class EditProfileForm extends Component {
  render() {
    return (
      <div>
        <Field name="firstName" component="input"/>
      </div>
    );
  }
}

2) initialValues prop 需要是一个对象而不是一个值

const mapStateToProps = state => ({
  initialValues: state.profile
});

如果您尝试创建功能组件，这里是解决方案

let EditProfileForm = () => {
  return (
    <div>
      <Field name="firstName" component="input"/>
    </div>
  );
};

EditProfileForm = reduxForm({
  form: 'EditProfileForm'
})(EditProfileForm);

const mapStateToProps = state => ({
  initialValues: state.profile
});

export default connect(mapStateToProps)(EditProfileForm);

使用 state 到 props 初始化 redux 表单控件

Initialize redux form controls with state to props

reactjs

react-redux

react-redux-form