将默认值传递到禁用的输入字段，但它阻止输入到Redux表单中的已启用字段中

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?

编辑：兜兜和重试的东西，我已经试过了。

这适用于向该字段中获取值，但在尝试将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; 

获取未定义的`无法读取属性“道具”这个和十几个其他变化：

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

Answer 1

的事情之一已经被认为是一个小细节是势在必行。

在这种情况下，我已经打成acctVal真应该称为initialValues像文件说：

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