私のフォームをredux-formで初期化

Question

私はredux-formと 'initialValues'小道具でフォームを初期化する際に問題に直面しています。私は多くの記事（例えばhere）を読んでいて、私はそれを動作させることができません...

私のinitialValuesは正しく設定されていますが、私のフィールドはそれで更新されていません...多分問題は私のrenderBasicField関数では、私はこれを修正する方法を知らない。

それ以外の場合は、コンポーネントがレンダリングされたときにpropがまだ設定されていないようなものかもしれません...しかし、mapStateToPropsを使用する必要があるため、それを動作させるために何をすべきかわかりません。

私は問題のこの種についての記事をたくさん見て、残念ながら私のために私はすでにtrueにenableReinitializeプロパティを設定:)

ここに私のコードです：

// My component 
class ProfileForm extends React.Component { 

    render() { 
    console.log(this.props); 
    const { handleSubmit } = this.props; 
    const messageClassname = this.props.errorMessage !== undefined ? stylesShared.errorMessage : this.props.confirmationMessage !== undefined ? stylesShared.confirmationMessage : ''; 
    return (
     <div> 
     <div> 
      <div> 
      <form onSubmit={handleSubmit(this.props.onSubmitProfileUpdate)}> 
       <div> 
       <h4>Votre profil</h4> 
       </div> 
       <div className={messageClassname}> 
       {this.props.errorMessage && 
       <span>{this.props.errorMessage}</span> 
       } 
       {this.props.confirmationMessage && 
       <span>{this.props.confirmationMessage}</span> 
       } 
       </div> 
       <div> 
       <Field name='firstname' type='text' label='Prénom' component={renderBasicField} /> 
       </div> 
       <div> 
       <Field name='lastname' type='text' label='Nom' component={renderBasicField} /> 
       </div> 
       <div> 
       <Field name='email' type='email' label='Email' addon='@' component={renderBasicField} /> 
       </div> 
       <div> 
       <Field name='telephone' type='text' label='Téléphone' component={renderBasicField} /> 
       </div> 
       <div> 
       <Field name='ranking' className='input-row form-group form-control' options={this.getTennisRankingsOptions()} type='select' component={renderSelectField} /> 
       </div> 
       <div> 
       <Field name='city' type='text' label='Ville' component={renderBasicField} /> 
       </div> 
       <div> 
       <button className='btn btn-info btn-lg center-block' type='submit'>Mettre à jour</button> 
       </div> 
      </form> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

const reduxFormDecorator = reduxForm({ 
    form: 'profile', 
    enableReinitialize: true, 
    validate: validateProfileForm 
}); 

const mapStateToProps = (state) => { 
    return { 
    initialValues: state.userConnection.loadProfile.user 
    }; 
}; 

const reduxConnector = connect(
    mapStateToProps, 
    null 
); 

export default reduxConnector(reduxFormDecorator(ProfileForm)); 

とコードへ私のフィールドをレンダリング：

// My renderFunction 
export const renderBasicField = ({input, meta: {touched, error}, label, type='text', id, addon, styleClasses, handleChange, controlledAsyncValue}) => { 
    const inputStyles = getInputStyles(input.value, touched, error); 
    if (controlledAsyncValue !== input.value) { 
    input.value = controlledAsyncValue; 
    input.onChange(input.value); 
    } 
    return (<div className={inputStyles.container}> 
    {displayInputLabel(inputStyles.input.idInput, label)} 
    <div className={addon && 'input-group'}> 
     {addon && <span className='input-group-addon'>{addon}</span>} 
     <input 
     {...input} 
     className={classNames(styles.basicInputField, styleClasses)} 
     id={id} 
     value={input.disabled ? '' : input.value} 
     onChange={getOnChangeAction(input.onChange, handleChange)} 
     placeholder={label} 
     type={type} 
     aria-describedby={inputStyles.input.ariaDescribedBy} 
     /> 
    </div> 
    {touched && error && 
    displayErrorMessage(error)} 
    </div>); 
}; 

私は私のカスタムrenderBasicField機能ではinitialValueを無視していた場合、私は疑問に思ってますが、その場合には、私は私が設定し、この値を取得します私の入力？

ありがとうございました！ :)

Answer 1

接続とフォームデコレータを切り替えてみてください。それは助けになるはずです。

export default reduxFormDecorator(reduxConnector(ProfileForm));