無法在redux-form w中設置默認值。 應對

Question

我無法設置w / 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

你可以在reduxForm的mapStateToProps中提供initialValues ：

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

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

reduxForm(
  mapFormToProps,
  mapStateToProps
)(Profile)

然后像這樣綁定： <input type="text" placeholder="name" {...name} /> 。