Question

我的后端快递服务器上有Joi验证。我能够将来自后端的验证消息放入redux错误状态对象，但是如何正确设置此redux对象状态以正确显示前端的消息，其形式为redux-form。尤其是当错误从诸如“需要名称”到“名称必须至少2个字符”之类的来回切换时

我尝试通过导入SubmissionError并在验证错误发生时抛出新的SubmissionError对象，来完成redux-form文档所说的事情。

它看起来像位于回调函数中，该函数传递给拥有this.props.handleSubmit方法的redux表单。

但是在我当前的代码中，我得到了一个“ react-dom.development.js：57未捕获的不变违规：对象作为React子对象无效（找到：带有键{}的对象）。如果要渲染一个子集，请改用数组。”现在出错，

输入组件所在的组件。

class WorkoutNew extends React.Component {
  onSubmit = formValues => {

    this.props.createWorkout(formValues, this.props.history);
  };

  render() {
    return (
      <div>
        <h1 className="title is-3">Create a workout</h1>
        <SingleForm onSubmit={this.onSubmit} form="newWorkout" />
      </div>
    );
  }
}

const mapStateToProps = ({ errors }) => {
  return { errors };
};

export default connect(
  mapStateToProps,
  { createWorkout }
)(withRouter(WorkoutNew));

重复使用的单个输入表单组件。我传入form =“ value”作为道具，以设置此表单的每次使用都具有唯一的表单值。

class SingleForm extends React.Component {
  onSubmit = formValues => {
    console.log("Form Values", formValues);
    console.log("PROPS", this.props);

    if (formValues) {
      throw new SubmissionError({
        name: this.props.errors
      });
    }

    this.props.onSubmit(formValues);
  };

  render() {
    return (
      <div>
        <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
          <Field label="Name" name="name" type="text" component={InputField} />
          <button
            type="submit"
            className="button is-primary is-large"
            style={{ marginTop: "20px" }}
          >
            Submit
          </button>
        </form>
      </div>
    );
  }
}

const mapStateToProps = ({ errors }) => {
  return { errors };
};

export default reduxForm({})(connect(mapStateToProps)(SingleForm));

在这里我传递了一个空对象，因为我多次使用了此组件，所以我传递了形式：“值”作为道具。

我的动作创建者。

export const createWorkout = (formValues, history) => dispatch => {
  axios
    .post("/api/workouts", formValues)
    .then(res => {
      history.push("/workouts");
      // Push back to workouts page
    })
    .catch(err => dispatch({ type: GET_ERRORS, payload: err.response.data }));
};

我想发生的是，当我提交输入时，它会在输入下显示服务器端验证错误。这些错误也可以正确地提取到我的redux错误对象中。

Answer 1

在redux中保持短暂状态被认为是不好的做法，我建议使用Formik将所有表单逻辑保留在组件中，您还将发现Formik处理提交的方式允许使用Formik为每个字段设置错误袋。另外，我建议您考虑使用Yup进行同步客户端验证，该API几乎与Joi类似。如Joi仓库中所述，您不应使用Joi进行客户端验证，因为此库是在考虑nodeJS的情况下开发的。

如何使我的服务器端Joi验证能与redux-form一起正常使用？

1 个答案: