redux 表单服务器端验证

Question

我一直在设置 redux 表单的服务器端验证。我有一个注册表单并完美地执行了客户端验证，但是在服务器端验证时，我无法理解如何使用相应的输入字段显示来自服务器的错误消息。

API 请求

 const createMemberRegistration = user => {
  return dispatch => {
  dispatch({ type: POST_REQUEST });
   processMemberRegistration(user)
   .then(user => {
    dispatch({ type: REGISTRATION_SUCCESS });
    dispatch(reset('memberregistration'));
  })
  .catch(err => {
    dispatch({ type: REGISTRATION_ERROR,payload:err });
  });
  };
 };

组件

 // submit button
 submitSignup(values) {
  var registerfields = JSON.stringify({
   first_name: values.firstname.trim(),
   last_name: values.lastname.trim(),
   email: values.email.trim(),
   password: values.password.trim()
 });
 if (registerfields) {
  this.props.createMemberRegistration(registerfields);
 }
}

//binding with redux form
const reduxmemberregistration = reduxForm({
 form: "memberregistration",
 validate:isvalidMemberRegistration,
 asyncValidate,
 enableReinitialize: true
})(MemberRegistration);

异步函数

卡在这里做什么以及如何使用相应的字段进行验证

 const asyncValidate = (values, dispatch, props) => {
  return new Promise((resolve, reject) => {
   if(values.email){ // i get the value from the form,so what to do here?
    // so should i need to send request all the time to server for each 
      field for validation or what?
  }
 }
});
};

Answer 1

假设您有一个代表表单状态的对象，并且您有一些 error 属性与表单上的字段具有相同的属性。

假设它看起来像这样

formState: {name : 'Test', error: {name: null} }

并且您在输入下呈现一些错误消息或使用基于此formState.error.name 的某个类装饰无效输入字段。

在这种情况下，您可能会从服务器获取响应对象，该对象还包含一些输入特定信息并将其存储在例如formState.serverError 错误。因此，一旦从后端获取数据，您将使用此验证向 Redux 存储发布一个操作，如果有一些错误，您将填充相应的错误并显示相应的错误消息。

输入字段有效性的条件现在看起来像formState.error.name && formState.serverError.name