Question

在Redux表单中，我遇到了使错误消息正确显示在带有对象值的向导表单中的问题。在向导的第一个问题中，我有一个对象字符串，如下所示，其代码在WizardFormQuestion1.js文件中，其中name =“ survey [age]”。

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错误消息“年龄未定义”或验证错误消息不显示。

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表单向导对象值验证

1 个答案: