Reactjs 如何让服务器端Joi验证与redux表单一起正常工作？

我在后端express服务器上进行了Joi验证。我能够将验证消息从后端获取到redux errors state对象中，但是如何正确设置此redux对象状态，以便在前端使用redux表单正确显示消息。特别是当错误从“name is required”到“name必须至少包含2个字符”来回切换时

我已经尝试过按照redux表单文档所说的方法导入SubmissionError，并在发生验证错误时抛出一个新的SubmissionError对象

看起来它位于传递给redux forms own this.props.handleSubmit方法的回调函数中

但是，在我当前的代码中，我得到了一个“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));

---

我希望在提交输入时，在输入下显示服务器端验证错误。这些错误也被正确地提取到我的redux errors对象中。

在redux中保留临时状态被认为是不好的做法，我建议使用将所有表单逻辑保留在组件中，您还会发现，Formik处理提交的方式允许使用Formik包为每个字段设置错误。另外，我建议您考虑使用同步客户端验证，API几乎完全一样。正如Joi repo上所述，您不应该将Joi用于客户端验证，因为此库是在考虑NodeJ的情况下开发的。

您所说的“在redux中保持短暂状态是不好的做法”是什么意思？也感谢您的建议！这可以追溯到Redux是一个冗长且结构化的全局状态的原则，根据Dan Abramov（创建者）的说法，您应该只保留与整个应用程序相关或需要以复杂方式处理的状态。简言之，如果你可以使用本地状态，那么就使用本地状态，不要强迫自己让所有东西都可以全球访问

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