React，Formik，是的：验证数组的顺序

Question

我用 React、Formik 和 Yup 创建了一个简单的表单。它包含一个数字列表。我想验证列表的顺序是升序的：

1,2,3 有效
1,5,100 有效
3,1,2 无效
100,99,98 无效

我检查了 Yup 文档，但没有关于升序或降序的内容。去这里的最佳方式是什么？

import React, { useState, Fragment } from "react";
import ReactDOM from "react-dom";
import { Formik, FieldArray, Form, Field } from "formik";
import * as Yup from "yup";

function App() {
  const [values] = useState({
    someNumbers: [1, 2, 3]
  });

  const validationSchema = Yup.object().shape({
    // how can I check for the correct order here?
    someNumbers: Yup.array()
  });

  return (
    <div className="App">
      <Formik
        initialValues={values}
        onSubmit={values =>
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
          }, 500)
        }
        validationSchema={validationSchema}
      >
        {formikProps => (
          <Form>
            <FieldArray
              name="listOfDates"
              render={({ move, swap, push, insert, unshift, pop }) => (
                <Fragment>
                  {formikProps.values.someNumbers.map((d, index) => (
                    <Field type="number" name={`someNumbers.${index}`} />
                  ))}
                </Fragment>
              )}
            />
            <div>
              <button type="submit">Submit</button>
            </div>
            <pre>{JSON.stringify(formikProps.errors, null, 2)}</pre>
            <pre>{JSON.stringify(formikProps.values, null, 2)}</pre>
          </Form>
        )}
      </Formik>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

代码如下 codesandbox。

Answer 1

我想我有点晚了。但这可以帮助你：

// Custom Validation
Yup.addMethod(Yup.array, 'sorted', function (message, parser = a => a) {
  return this.test('sorted', message, function (list) {
      return Boolean(
        list
          .map(parser)
          .reduce((valid, item) => valid && item >= valid && item)
      );
  });
});

然后你可以这样做：

const arr1 = [1,2,3];
const validationSchema1 = Yup.array().sorted('Shame!');

const arr2 = [{id:1},{id:2},{id:3}];
const validationSchema2 = Yup.array().sorted('Shame!', a => a.id);

这是一个例子：https://codesandbox.io/s/nameless-dust-fjxon

React，Formik，是的：验证数组的顺序

React, Formik, Yup: Validate order of array

reactjs

yup

formik