如何使驗證對從數組生成的redux-form字段起作用

Question

我正在嘗試使用redux-form生成測驗表單。 我的單個redux-form字段組件的數據源來自數組- questions我而言是questions 。 除驗證外，一切都按預期工作。 有什么想法可以解決？

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { Input, Button } from 'reactstrap';

const validate = values => {
  const errors = {};
  if (!values.question) { // this is just an example of what I am trying to do, validation does not work
    errors.question = 'Required';
  } else if (values.question.length < 15) {
    errors.question = 'Must be 15 characters or more';
  }
  return errors;
};

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

const renderQuestions = questions => {
  return questions.map(question => {
    return (
      <Field key={question.id} name={question.prompt} type="textarea" component={renderField} label={question.prompt} />
    );
  });
};

const QuizStepForm = props => {
  const { handleSubmit, pristine, reset, submitting, questions } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field name="username" type="textarea" component={renderField} label="username" />
      {renderQuestions(questions)}

      <div>
        <br />
        <Button color="primary" style={{ margin: '10px' }} type="submit" disabled={submitting}>
          Submit
        </Button>
        <Button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </Button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'quizStepForm',
  validate
})(QuizStepForm);

Answer 1

您的驗證功能假定存在一個名為“問題”的字段。 但是您的代碼會創建一組字段，其名稱由{question.prompt}設置。 如果堅持使用此實現，您的驗證代碼將需要了解所有question.prompt數組值，並為每個數組檢查values[question.prompt] ，然后為任何失敗設置errors[question.prompt] 。 盡管這似乎是次優的設計，但這可能會起作用。

這對於FieldArray可能是一個很好的用例。 在FieldArrays中，在每個字段上都會為您調用驗證函數； 您的驗證代碼不必知道所有字段的名稱。