Redux 表单向导对象值验证

Question

在 Redux Form 中，我无法让错误消息正确显示在具有对象值的 Wizard 表单中。在向导的第一个问题中，我有一个对象字符串显示在下面的代码中，其中名称 = "survey[age]" 在 WizardFormQuestion1.js 文件中。

The code pen is here for the full code。

WizardFormQuestion1.js

import React from "react";
import { Field, reduxForm } from "redux-form";
import validate from "./validate";

const renderField = ({
  input,
  label,
  survey,
  type,
  meta: { touched, error }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} name={input.name} placeholder={label} type={type} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

const WizardFormFirstPage = props => {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="survey[age]"
        type="text"
        component={renderField}
        label="Age"
      />
      <div>
        <button type="submit" className="next">
          Next
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: "wizard", //                 <------ same form name
  destroyOnUnmount: false, //        <------ preserve form data
  forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
  validate
})(WizardFormFirstPage);

在 validate.js 中，我尝试了一些方法但无法验证对象字符串。我认为错误对象看起来像

error.survey = {'age': 'Required'};

我收到 JavaScript 错误消息 "age is undefined" 或当我使用点或括号表示法时验证错误消息未显示。

validate.js

const validate = values => {
  const errors = {};

  values = {
    survey: { age: undefined }
  };


  if (!values.survey["age"]) {
    errors.survey = { age: "Required" };
  }

  return errors;
};

export default validate;

我查看了其他参考资料，但未能轻松找到该问题的有效答案。有什么建议么？谢谢。

Answer 1

好的，我通过为错误和值添加空对象解决了这个问题。它可能不是最优雅的，但它确实有效。

这是 validate.js 中的解决方案。

const validate = values => {
  const errors = { survey: {} };
  const { survey = {} } = values;
  const { age } = survey;

  if (!age) {
    errors.survey.age = "Age is required!";
  }

  return errors;
};

export default validate;

Redux 表单向导对象值验证

Redux Form Wizard object values validate

javascript

reactjs

redux

redux-form

redux-form-validators