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

我做了很多调试和更改，最后我找到了一种方法来使其全部正常工作。

这也许不是最好的答案，但它可以帮助遇到相同问题的人：

我用Router移除了（不再需要它了），并更改了 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未正确连接到路由器

1 个答案: