Question

我正在尝试从中加载初始值，但无法执行此操作，我正在使用redux-from，我在redux store中设置了配置文件数据，并可以通过props访问数据（控制它们）但无法在表单输入中显示。我试图复制这个redux-from example.但是不能复制这个{{3}}。能够继续下去。

下面是代码。

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>
)

提前致谢

Answer 1

最后我找出了解决方案。以下是解决方案。我们需要添加enableReinitialize：true，如下所述。如果我们的initialValues道具得到更新，表格也会更新。

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

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

1 个答案: