Redux-Form 未正确连接到路由器

Question

我正在尝试 initialize 将数据放入表单、显示表单并导航到其他组件（手动）。在我成功将数据加载到表单中后，我发现自己陷入了死胡同，我无法导航到另一个组件，因为我收到 TypeError: path.lastIndexOf is not a function 错误。

我正在使用 redux-form 并且组件是 connect 通过 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 的顺序时，我可以导航但是我看不到任何初始化为表单的数据。但遗憾的是，这是我无法摆脱的死胡同。非常感谢任何帮助或建议。

Answer 1

我进行了大量的调试和更改，最后我找到了一种使它全部正常工作的方法。

这可能不是最佳答案，但可以帮助遇到同样问题的人：

我删除了 withRouter（因为不再需要它了）并更改了 UserProfile.jsx 中 HOC 的顺序以匹配：

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

我在 UserProfileComponent.jsx* 中硬编码了 initialValues 以匹配：

<UserProfile onSubmit={sendData} initialValues={props.user.data}/>

现在数据已加载，用户可以与表单交互（正在验证），而且用户可以在站点中完全导航而不会出现错误。

我希望它能帮助别人解决我遇到的相同或相似的问题。

享受

Redux-Form 未正确连接到路由器

Redux-Form is not connected to Router correctly

reactjs

redux-form