用 redux-form 初始化我的表单

Question

我在使用 redux-form 和“initialValues”道具初始化表单时遇到了麻烦。我读了很多帖子（例如here），但我没有设法让它工作......

我看到我的 initialValues 设置正确，但我的字段没有更新...也许问题出在我的 renderBasicField 函数中，但我不知道如何解决这个问题。

否则，它也可能是在渲染组件时尚未填充道具......但我不知道该怎么做才能让它工作，因为我必须依靠 mapStateToProps 来提供它。

我看到很多关于这类问题的帖子，不幸的是我已经将 enableReinitialize 属性设置为 true :)

这是我的代码：

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