forms - 无法在 redux-form w 中设置默认值。 react

Question

我无法设置带有 redux-form 的表单的默认值。我正在寻找的结果是一个可编辑的文本字段，稍后提交到数据库。即更新电子邮件地址。

我尝试将表单中的属性设置为value 或defaultValue。注意:我删除了重复的代码，以便仅使用“名称”字段就可以更轻松地阅读。

任何见解都值得赞赏!

  import React, { Component, PropTypes } from 'react';
    import { reduxForm } from 'redux-form';
    export const fields = [ 'name']

        //(container) page-profile.js

            import React, { Component } from 'react';
            import { connect } from 'react-redux'; 
            import Profile from '../components/Profile';

            class PageProfile extends Component {

              render() {
                return (
                 <Profile 
                    userInfo = {this.props.userInfo}
                 />
                )
              }
            }
            // requiring this page before rendering -- breaks page
            PageProfile.propTypes = {
               //userInfo: PropTypes.object.isRequired
            }

            function mapStateToProps(state) {
              return {
               userInfo : state.auth.userInfo
              }
            }


            // injection to child
            export default connect(mapStateToProps, {
            })(PageProfile);





           // profile.js

        export default class Profile extends Component {
              render() {
                const { fields: {name }, resetForm, handleSubmit, submitting } = this.props
                return (
                    <div>
                    <img className="image" src={this.props.userInfo.img_url}/>

                    <form onSubmit={handleSubmit}>
                    <div>
                    <div>
                      <label>name</label>
                      <div>
                      <input type="text" defaultValue={this.props.userInfo.name} placeholder="name" {...name}/>
                      </div>
                      {name.touched && name.error && <div>{name.error}</div>}
                    </div>
                      <button type="submit" disabled={submitting}>
                        {submitting ? <i/> : <i/>} Submit
                      </button>
                  </form>
                  </div>
                )
              }
            }
            Profile.propTypes = {
              fields: PropTypes.object.isRequired,
              handleSubmit: PropTypes.func.isRequired,
              resetForm: PropTypes.func.isRequired,
              submitting: PropTypes.bool.isRequired
            }

            export default reduxForm({
              form: 'Profile',
              fields,
              validate
            })(Profile)

Answer 1

您可以提供initialValues在reduxForm的mapStateToProps:

const mapFormToProps = {
  form: 'Profile',
  fields,
  validate
};

const mapStateToProps = (state, ownProps) => ({
  initialValues: {
    name: ownProps.userInfo.name
  }
});

reduxForm(
  mapFormToProps,
  mapStateToProps
)(Profile)

然后像这样绑定(bind):<input type="text" placeholder="name" {...name} /> .