Redux-Form неправильно подключен к роутеру - PullRequest
Новая
       11

Redux-Form неправильно подключен к роутеру

0 голосов
/ 27 марта 2019

Я пытаюсь initialize данные в форму, показать форму и перейти к другому компоненту (вручную). После того, как я успешно загрузил данные в форму, я оказался в тупике, потому что я не могу перейти к другому компоненту, потому что я получаю ошибку TypeError: path.lastIndexOf is not a function.

Я использую redux-form, а компонент connect ed через withRouter.

Я попытался обойти его, изменив на React.Component, но после того, как мне удалось получить данные в форме и подключить компонент с помощью Router, данные в форме не могли измениться (я даже не мог взаимодействовать с формой ). Поэтому я вернулся к старому решению, которое дало мне эту ошибку.

Используемые версии : 

"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"redux": "^4.0.1",
"redux-form": "^8.1.0",   
"redux-thunk": "^2.3.0",

userProfile.jsx 

const renderField = ({
  input,
  label,
  placeholder,
  type,
  meta: { touched, error },
  ...rest
}) => (
  <div>
    <label htmlFor={label}>{label}</label>
    <div>
      <input {...input} {...rest} type={type} />
      {touched
        && ((error && <span className="error-text">{error}</span>))}
    </div>
  </div>
);

let userProfile = (props) => {
  const {
    handleSubmit, pristine, submitting, reset,
  } = props;
  const confirmTitle = 'Are you sure about clearing the changed values?';
  const confirmDescription = 'Please notice that you can lose the data you edited';
  return (
    <div className="container__form" style={{ height: '160vh' }}>
      <Confirm title={confirmTitle} description={confirmDescription}>
        { confirm => (
          <form className="extended-form" onSubmit={handleSubmit}>
            <h3> Personal Data </h3>
            <div className="form-control">
              <Field
                name="username"
                type="text"
                component={renderField}
                label="User name"
                disabled
              />
            </div>
            <div className="form-control">
              <Field
                name="email"
                type="text"
                component={renderField}
                label="E-mail"
                disabled
              />
            </div>
            <div className="form-control">
              <Field
                name="user.firstName"
                type="text"
                component={renderField}
                label="First Name"
                validate={required()}
              />
            </div>
            <div className="form-control">
              <Field
                name="user.lastName"
                type="text"
                component={renderField}
                label="Last Name"
                validate={required()}
              />
            </div>
            <div>
              <div className="form-actions">
                <button type="submit" disabled={submitting}>
          Submit
                </button>
                {/* </div>
              <div className="form-actions"> */}
                <button type="button" disabled={pristine || submitting} onClick={confirm(() => reset())}>
          Cancel
                </button>
              </div>
            </div>
          </form>
        )}
      </Confirm>
    </div>
  );
};

export default compose(
  withRouter,
  connect(
    state => ({
      ...state,
      initialValues: state.user.data,
    }),
  ),
  reduxForm({
    form: 'userProfileForm',
    enableReinitialize: true,
  }),
)(userProfile);

UserProfileComponent.jsx 

const UserProfileComponent = (props) => {
  const sendData = (data) => {
    props.clearErrors();
    props.updateUserData(data);
  };

  const { errors } = props;
  return (
    <div className="extended">
      <h2> Extended Register process </h2>
      <div className="tooltip"> i </div>
      <span className="pale-magenta-text"> The mandatory fills are indicated by a * in the right site of the field name </span>

      <UserProfile onSubmit={sendData} />
      <br />
      {errors && (<div className="error-text">{errors.error}</div>)}
    </div>
  );
};

const mapStateToProps = state => ({
  ...state,
  errors: state.errors,
});

const mapDispatchToProps = dispatch => ({
  updateUserData: data => dispatch(updateUserData(data)),
  clearErrors: () => dispatch(clearErrors()),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(UserProfileComponent);

Я ожидаю, что initialize формы будет работать, а также, что я подключен к Router правильно.

Проблема, я думаю, в HOC, потому что, когда я изменяю порядок reduxForm и connect, я могу ориентироваться, но не вижу никаких данных, инициализированных в форму. Но, к сожалению, это мой тупик, из которого я не могу выйти. Большое спасибо за любую помощь или предложение.

1 Ответ

0 голосов
/ 28 марта 2019

Я сделал много отладок и изменений, и, наконец, я нашел способ, как заставить все это работать.

Возможно, это не самый лучший ответ, но он может помочь кому-то с той же проблемой:

  1. Я удалил с помощью Router (поскольку он больше не был нужен) и изменил порядок HOC в UserProfile.jsx , чтобы он соответствовал: 
export default compose(
  reduxForm({
    form: 'userProfileForm',
    enableReinitialize: true,
  }),
  connect(
    state => ({
      ...state,
      initialValues: state.user.data,
    }),
  ),
)(userProfile);
  1. Я жестко запрограммирован initialValues в UserProfileComponent.jsx * в соответствии: 
<UserProfile onSubmit={sendData} initialValues={props.user.data}/>

Теперь данные загружены, пользователь может взаимодействовать с формой (проверка работает), а также пользователь может полностью перемещаться по сайту без ошибок.

Надеюсь, это поможет кому-то решить ту же или похожую проблему, с которой я столкнулся.

Наслаждайтесь

...