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

Posted 2023-02-22

【中文标题】手动设置 redux-form 字段和/或表单错误

【英文标题】：Manually set redux-form field and/or form errors

【发布时间】：2017-06-24 10:05:39

【问题描述】：

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

然而，设置字段/表单错误的 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)                                            
  );                                                                         
 

我不能在asyncActionDispatcher() 中抛出SubmissionError，因为它是由redux 而不是redux-form 调用的。

redux-form 是否有另一个 API 可以在字段/表单上设置错误？

【参考方案1】：

是的，确实如此。

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

validate 应该是一个函数，如果验证通过，则返回一个空对象或以 someField: 'some error', otherField: 'other error' 形式详细说明验证错误的对象

另一方面，asyncValidate 应该返回一个Promise，如果验证通过，则该Promise 会正常解析；如果验证未通过，则该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

【讨论】：

validate 和 asyncValidate 似乎仍然需要与我提到的相同的调用者/被调用者耦合，也没有为您提供getState()，以便始终获得最新的状态值。

我更新了答案，也许可以满足您的特定需求。如果不是这样，您需要编辑您的问题，以便更清楚地了解您实际想要实现的目标。

您更新的答案确实解决了授予对getState() 的访问权限并能够设置表单/字段错误的问题。现在，我们的两个答案都略有不同，目的相同，但我会给你答案，因为你的答案很好地利用了dispatch() 返回值。

实际上在我给你答案之前，我想编辑你的，删掉与validate和asyncValidate有关的原始答案，因为我从来没有对客户端验证感兴趣.我只是想访问getState()，同时仍然能够在表单/字段上设置错误。

【参考方案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 对象），那么您不需要需要为第一个参数提供参数。

【参考方案3】：

我从 axios 的 .catch() 回调中抛出 SubmissionError，它是从 thunk 内部调用的，所以我认为您应该能够在 ReduxSaga 中执行相同的操作。只需确保return，这样您就不会收到未捕获的异常错误。在我的例子中，thunk 返回 axios 调用，在 .handleSubmit() 内部我返回 thunk。

【参考方案4】：

redux-form 是否有另一个 API 可以在字段/表单上设置错误？

当asyncValidate 和其他建议的选项不起作用时（例如，因为验证考虑多种形式），这里的另一个选项是直接发送updateSyncErrors。下面的示例用法：

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

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

【讨论】：

你的救命稻草

为我调用了两次。第一次显示错误消息，然后第二次清除它。