0

在 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 错误消息，或者当我使用点或括号表示法时未显示验证错误消息。

验证.js

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

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


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

  return errors;
};

export default validate;

我查看了其他参考资料，但没有轻易找到这个问题的有效答案。有什么建议么？谢谢你。

4

1 回答 1

0

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

这是 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;
于 2018-12-18T02:29:27.480 回答