React, Formik, Yup: Проверить порядок массива

Я создал простую форму с помощью React, Formik и Yup. Он содержит список чисел. Я хочу убедиться, что список идет по возрастанию:

  • 1,2,3 действительно
  • 1,5 100 действительно
  • 3,1,2 недействительно
  • 100,99,98 недействительно

Я проверил документацию Ага, но там не было ничего для восходящего или нисходящего. Как лучше всего пойти сюда?

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);

Вот код в виде codeandbox.


reactjs formik yup
person Klaus    schedule 13.12.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Думаю, я немного опоздал. Но это может вам помочь:

// 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 < / а>

person Andrés Encarnación    schedule 16.04.2020
comment
Приятно ... Мне очень нравится ваш подход с функцией парсера - person Klaus; 19.04.2020