初期値をReduxフォームにロードしたい

Question

初期値をからロードしようとしていますが、これはできませんでした。私はredux-fromを使用しています。私はreduxストアでプロファイルデータを設定し、それらをコンソール化します）、フォーム入力で表示することはできません。私はこれを複製しようとしています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> 
) 

最終的に私は解決策を見つけ出す事前

Answer 1

に感謝します。以下はその解決策です。下記のように、enableReinitialize：trueを追加する必要があります。 initialValuesの小道具が更新されると、フォームも更新されます。

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