無効な入力フィールドにデフォルト値を渡しますが、Redux-Formsの有効なフィールドへの入力を妨げています

Question

昨日からこれと戦っていましたが、これは私が得るほどの作業です。サーバーから受信したデータを入力フィールドにあらかじめ入力しようとしています。かなりシンプルだと思われますが、私は明らかに何かを見逃しています。

フィールドを取り込むことができますが、フォームのすべてのフィールドが編集からロックされています。事前に入力されていないため、編集可能である必要があります。

これは私が今までに持っているものの断片を「作品」としています。ユーザー名はサーバーが値で応答できる場所です。renderDisabledFieldを使用する場合は、フィールドにvalueが設定され、編集できないように無効にします。それ以外の場合は、編集可能にする必要があります。パスワードフィールドは常に編集可能でなければなりません。

componentWillReceiveProps() { 
    this.props.initialize(this.props.acctVal); 
} 

renderField(field) { 
    const { 
     placeholder, 
     type, 
     name, 
     meta: { 
      touched, 
      error 
     } 
    } = field; 

    return (
     <div className='form-group'> 
      <input 
       className='form-control' 
       type={type} 
       placeholder={placeholder} 
       {...field.input} 
      /> 
      <div className='text-danger'> 
       {touched ? error : ""} 
      </div> 
     </div> 
    ); 
} 

renderDisabledField(field) { 

    const { 
     type, 
     name, 
     placeholder, 
    } = field; 

    return (
     <div className='form-group'> 
      <input 
       className='form-control' 
       type={type} 
       placeholder={placeholder} 
       disabled 
       {...field.input} 
      /> 
     </div> 
    ); 
} 

render() { 
    if (this.props.permitRender) { 
     const { handleSubmit } = this.props; 
     return (
      <div> 
       <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 

        {this.renderAlert()} 

        <h4>Set Username</h4> 
        <p>Please enter the username you would like associated with your account. It must be at least 5 characters in length.</p> 

        <Field 
         name='username' 
         type='text' 
         placeholder='Enter Username' 
         onBlur={this.validateUsername.bind(this)} 
         component={this.props.acctVal.username ? this.renderDisabledField : this.renderField} 
        /> 

        <hr /> 

        <h4>Set New Password</h4> 
        <p>Type your new password twice. </p> 
        <p>It must be a minimum of 8 characters in length and contain at least:</p> 
        <ol> 
         <li>One uppercase character</li> 
         <li>One special character</li> 
         <li>One number</li> 
        </ol> 

        <Field 
         name='password1' 
         type='password' 
         placeholder='Enter New Password' 
         component={this.renderField} 
        /> 

        <Field 
         name='password2' 
         type='password' 
         placeholder='Confirm Password' 
         component={this.renderField} 
        /> 

        <hr /> 

        <button type="submit" className="btn btn-primary">Submit</button> 
       </form> 
       <br /> 
      </div> 
     );    
    } else if (!this.props.permitRender) { 
     return ( 
      <Loading /> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     errorMessage: state.auth.error, 
     permitRender: state.auth.permitRender, 
     questions: state.auth.questions, 
     acctVal: state.auth.acctVal 
    }; 
} 

SetupUser = reduxForm({ 
    form: 'setup_user', 
    touchOnChange: true, 
    validate 
})(SetupUser); 
SetupUser = connect(mapStateToProps, { checkUsername, setupUser, verifyKey })(SetupUser); 
export default SetupUser; 

編集：私はライフサイクルの異なる点でそれをレンダリングする様々な試みた

import { 
    ACCT_VALUES 
} from '../actions/authentication'; 

export default function(state = {}, action) { 
    switch(action.type) { 
     case ACCT_VALUES: 
      return { ...state, 
       acctVal: { 
        username: action.payload.data.username, 
        company: action.payload.data.company_name[0].company_name, 
        firstname: action.payload.data.first_name, 
        lastname: action.payload.data.last_name, 
        email: action.payload.data.email, 
        phone: action.payload.data.phone 
       }, 
      }; 
     default: 
      return state; 
    } 

    return state; 
} 

：

https://reactjs.org/docs/react-component.html#the-component-lifecycle

はほとんど減速を忘れてしまいましたまた、これらのを介して試してみましたが、dを得ることができていないesired結果：

https://redux-form.com/6.7.0/examples/initializefromstate/

Redux form defaultValue

How to properly set default values using redux-forms?

EDIT：サークルで行くと再試行のもの私はすでに試してみました。

これはフィールドに値を取得する際に機能しますが、stateまたはpropsをinitialValuesに渡すと壊れます。

function mapStateToProps(state) { 
    return { 
     errorMessage: state.auth.error, 
     permitRender: state.auth.permitRender, 
     questions: state.auth.questions, 
     acctVal: state.auth.acctVal 
    }; 
} 

SetupUser = reduxForm({ 
    form: 'setup_user', 
    touchOnChange: true, 
    validate, 
    initialValues: {username: 'test1'} 
}, mapStateToProps)(SetupUser); 
SetupUser = connect(mapStateToProps, { checkUsername, setupUser, verifyKey })(SetupUser); 
export default SetupUser; 

`これで未定義のプロパティ「小道具」を読み、ダース他のバリエーションについてはできません取得：1が不可欠ですマイナーなディテールであることを前提としてい

initialValues: this.props.acctVal 
initialValues: {this.props.acctVal} 
initialValues: {username: this.props.acctVal.username} 

Answer 1

もの。この場合

は、私はドキュメントのようなinitialValues呼ばacctVal本当にあったはずとしてラベル付けされていたものと言う：

function mapStateToProps(state) { 
    return { 
     errorMessage: state.auth.error, 
     permitRender: state.auth.permitRender, 
     questions: state.auth.questions, 
     initialValues: state.auth.acctVal 
    }; 
} 

SetupUser = reduxForm({ 
    form: 'setup_user', 
    touchOnChange: true, 
    validate, 
})(SetupUser); 
SetupUser = connect(mapStateToProps, { checkUsername, setupUser, verifyKey })(SetupUser); 
export default SetupUser; 

それからちょうどを取り除くことができ

：

componentWillReceiveProps() { 
    this.props.initialize(this.props.acctVal); 
}