想要在 Redux 表单中加载初始值答案

【问题标题】：want to load initial Values in Redux Form想要在 Redux 表单中加载初始值
【发布时间】：2017-01-29 08:15:53
【问题描述】：

我正在尝试从 from 中加载初始值，但无法执行此操作，我正在使用 redux-from，我在 redux 存储中设置了配置文件数据，并且可以通过 props（控制台）访问数据但可以能够在表单输入中显示。我正在尝试复制此 redux-from example. 但无法继续。

下面是代码。

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';

import { required, email, maxLength25 } from '../utils/validations';
import { renderField,
    renderSelectField,
    renderRadioField,
    renderTextAreaField,
    renderCheckboxField
} from '../utils/textFieldGroup';
import countries from '../utils/countryList';
import { profileUpdate, profile } from '../actions/user';

const validateAndUpdateRecords = (values, dispatch) => {
    return dispatch(profileUpdate(values))
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    })
}

class ProfileForm extends React.Component {
    componentWillMount(dispatch){
        console.log('mount');
        this.props.fetchProfile();
    }

    render(){
        const { handleSubmit, submitSucceeded, error, profile } = this.props
        console.log('prof',profile);

        return (
            <div>
                <h1>Profile Page</h1>
                <form onSubmit={handleSubmit(validateAndUpdateRecords)}>
                    <div className={typeof error!='undefined'?'show alert alert-danger': 'hidden'}>
                     <strong>Error!</strong> {error}
                    </div>
                    <Field name="fname" type="text" component={renderField} label="First Name"
                      validate={[ required, maxLength25 ]}
                    />
                    <Field name="lname" type="text" component={renderField} label="Last Name"
                      validate={[ required, maxLength25 ]}
                    />
                    <Field component={renderRadioField} name="gender" label="Gender" options={[
                        { title: 'Male', value: 'male' },
                        { title: 'Female', value: 'female' }
                    ]} validate={ required } />
                    <Field name="country" type="text" data={countries} component={renderSelectField} label="Country"
                      validate={[ required ]}
                    />
                    <Field name="about_us" type="text" component={renderTextAreaField} label="About Us"
                      validate={[ required ]}
                    />
                    <Field name="newsletter" type="checkbox" component={renderCheckboxField} label="Newsletter"
                      validate={[ required ]}
                    />
                    <p>
                      <button type="submit" disabled={submitSucceeded} className="btn btn-primary btn-lg">Submit</button>
                    </p>
                </form>
            </div>
        )
    }
}

ProfileForm = reduxForm({
    form:'profile'
})(ProfileForm)

ProfileForm = connect(
  state => ({
    initialValues: state.user.profile 
  })              
)(ProfileForm)

export default ProfileForm;

//文本字段

export const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
    <div className={classnames('form-group', { 'has-error':touched && error })}>
      <label className="control-label">{label}</label>
      <div>
        <input {...input} placeholder={label} type={type} className="form-control"/>
        {touched && ((error && <span className="help-block">{error}</span>))}
      </div>
    </div>
)

提前致谢

【问题讨论】：

在您的代码 sn-p 中是否都出现了 .props？你必须有任何<obj>.props，其中<obj> 是未定义的。在您的代码 sn-ps 中，render() 和 componentWillMount() 中唯一出现的 ar 是在那里定义的 this？
嗨@NonPolynomial，对不起，我听不懂你说的，你能解释一下吗，我也在这个容器中使用了这个配置文件表单组件（codepen.io/mglrahul/pen/ZLaZvM?editors=0010），期待你的回复，谢谢。
@NonPolynomial，我想出了解决方案，谢谢

标签： reactjs redux react-redux redux-form react-redux-form

【解决方案1】：

最后我想出了解决方案。以下是解决方案。我们需要添加 enableReinitialize : true ，如下所述。如果我们的 initialValues 属性更新，表单也会更新。

ProfileForm = reduxForm({
    form:'profile',
    enableReinitialize : true
})(ProfileForm)

【讨论】：