无法在redux-form w中设置默认值。 应对

Question

I'm unable to set a default value of a form w/redux-form. The result I'm looking for is an editable text field to later to submit to the database. ie updating an email address.

I've tried setting a property in the form to value or defaultValue . Note: I've taken repetitive code out to make this easier to read with just a "name" field.

any insight is appreciated!

  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

You can supply initialValues in reduxForm 's mapStateToProps:

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

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

reduxForm(
  mapFormToProps,
  mapStateToProps
)(Profile)

Then just bind like so: <input type="text" placeholder="name" {...name} /> .