Question

我一直在尝试使用redux-form（v6.5.0）进行提交验证，并在登录时出现服务器验证错误后抛出SubmissionError。

在这里的示例Submit Validation Example中，submit函数使用promise并在回调错误上抛出SubmissionError，如果我遵循此工作流程，这对我来说很好。但在我的情况下，我想在提交表单上发送登录操作，并使用reducer来更改商店中的状态。

以下是我正在尝试做的一个基本示例：

LoginForm.js

const LoginForm = ({handleSubmit, submitting, error,}) => {
  ...
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <Field name="email" component="input" type="email" component={renderField} label="Email" validate={email}/>
      </div>
      <div>
        <Field name="password" component="input" type="password" component={renderField} label="Password" validate={required}/>
      </div>
      <button type="submit" disabled={submitting}>Log In</button>
    </form>
  )
}

export default reduxForm({
  form: 'loginForm'
})(LoginForm)

LoginPage.js

class LoginPage extends Component {

  handleSubmit = (values) => {
    this.props.dispatch(login(values));
  }

  render() {
    return (
      <div>
        {this.props.fetching && <p>LOGGING IN...</p>}
        <LoginForm onSubmit={this.handleSubmit} />
      </div>
    );
  }
}

如您所见，handleSubmit仅调度登录操作，并且不知道将发生的服务器错误。

登录操作如下所示：

function login({ email, password }) {
  return function(dispatch) {
    dispatch({type: "LOGIN_USER_PENDING"})
    setTimeout(() => {
      dispatch({type: "LOGIN_USER_REJECTED", payload: "Invalid username or password"})
    }, 2000);
  }
}

Reducer 如下所示：

case "LOGIN_USER_PENDING":
  return {...state, fetching: true}
case "LOGIN_USER_REJECTED":
  return {...state, fetching: false, error: action.payload}

我可以在LoginPage中成功识别错误，但我不能在handleSubmit函数之外抛出SubmissionError。

问题：

有没有办法从组件生命周期中的另一个函数抛出此SubmissionError？
如果没有，如何实现呢？我是通过从提交中发送登录操作而不是使用来自此处的承诺来做错的吗？

感谢。

Answer 1

我找到了一个解决方案，但我没有使用SubmissionError机制来完成这项工作并为我显示错误。所以仍然可能有一个更清洁的解决方案。

由于状态发生变化后我在LoginPage组件中出现错误，我只需将其转发给LoginForm并手动显示。

<强> LoginPage.js

class LoginPage extends Component {
  render() {
    return (
      <div>
        {this.props.fetching && <p>LOGGING IN...</p>}
        <LoginForm onSubmit={this.handleSubmit} _error={this.props.error} />
      </div>
    );
  }
}

<强> LoginForm.js

const LoginForm = ({handleSubmit, submitting, _error,}) => {
  ...
  return (
    <form onSubmit={handleSubmit}>
      {_error && <strong>{_error}</strong>}
      <div>
        ...
      </div>
      <button type="submit" disabled={submitting}>Log In</button>
    </form>
  )
}

我很高兴听到任何可以改善解决方案的建议。

Answer 2

您需要检查asyncValidation example。您需要将asyncValidate添加到表单配置中，然后才能从自定义asyncValidate函数中抛出错误。

redux-form：在服务器验证错误

2 个答案: