Question

我知道如果您从SubmissionError函数中抛出handleSubmit()，redux-form代码将填写相应字段和/或表单本身的错误。< / p>

然而，设置字段/表单错误的API会将handleSumbit()的实现紧密耦合为redux-form代码的调用者（包含SubmissionError异常处理程序）。

我的用例是这样的：

function asyncActionDispatcher(values) {                                     
  return (dispatch, getState) => {                                           
    // I'm using getState, which is not accessible in handleSubmit()         
    // But I'd also like to be able to set errors on the form fields and/or the
    // form.                                                                 
  };                                                                         
}                                                                            

function handleSubmit(values, dispatch) {                                    
  dispatch(                                                                  
    asyncActionDispatcher(values)                                            
  );                                                                         
}

我无法在SubmissionError中抛出asyncActionDispatcher()，因为它是redux而不是redux-form。

redux-form是否有其他API来设置字段/表单上的错误？

Answer 1

是的，确实如此。

您可以使用validate和asyncValidate道具为表单的值设置验证器函数（分别是同步和异步）。

validate应该是一个函数，如果验证通过则返回空对象，或者以{ someField: 'some error', otherField: 'other error' }

形式详细说明验证错误的对象另一方面，

asyncValidate应该返回一个Promise，如果验证通过则会被正常解析，或者如果验证错误没有通过，则返回一个详细说明验证错误的对象（见上文）。

handleSubmit的实现方式是在调用onSubmit之前运行同步和异步验证，因此如果您设置了validate和asyncValidate ，这些错误应该自动出现在您的表单/字段中，无需任何额外的工作。

希望这有帮助！

<强>更新

您也可以等到asyncActionDispatcher完成并继续提交或拒绝SubmissionError，具体取决于结果。

function asyncActionDispatcher(values) {
  return (dispatch, getState) => {
    if (success) {
      return Promise.resolve('success')
    } else {
      return Promise.reject('error')
    }
  }
}

function onSubmit(values, dispatch) {
  // dispatch whatever action you need to dispatch
  return dispatch(asyncActionDispatcher(values))
    .then(() => {
      // i guess you need to do your actual submitting here
    })
    .catch(error => {
      return new SubmissionError({ _error: 'whatever you want here' })
    })
}

// and in the component
<form onSubmit={ handleSubmit(onSubmit) }> ... </form>

来源：Redux-Form docs，wrapped component props documentation，synchronous validation example，asynchronous validation example

Answer 2

您的handleSubmit()被称为：

handleSubmit(values, dispatch, props)

... props对象的某个属性是stopSubmit()函数。

这就是你想要使用的，它的API与描述here类似：

stopSubmit(form:String, errors:Object)
// Flips the submitting flag false and populates submitError for each field.

您需要在自己导入该函数并使用该函数时指定唯一的form字符串标识符，但是如果您使用的版本过去handleSubmit()（通过props对象），那么你不需要为第一个参数提供参数。

Answer 3

我从SubmissionError回调中发出了.catch()，这是从一个thunk中调用的，所以我认为你应该可以在ReduxSaga中做同样的事情。只需确保return，以便您不会收到未捕获的异常错误。在我的情况下，thunk返回axios调用，在.handleSubmit()内部我返回thunk。

Answer 4

redux-form是否具有另一个API来设置字段/表单的错误？

如果asyncValidate和建议的其他选项不起作用（例如，由于验证考虑多种形式），此处的另一个选项是直接发送updateSyncErrors。用法示例如下：

const { updateSyncErrors } = require('redux-form/lib/actions').default;

dispatch(updateSyncErrors('formName', {
  fieldName: 'Some Error Message'
}));

手动设置redux-form字段和/或表单错误

4 个答案: