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);

Asycn功能

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

 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

redux表单服务器端验证

1 个答案: