Лучшие практики обмена сообщениями об ошибках

Question

Новичок реагирует, только начинает работать над приложением реаги-редукс. Просто интересно, есть ли у кого-нибудь какие-либо советы по передовой практике, касающиеся проверки формы и отображения сообщений об ошибках? Любые мысли по этому поводу очень ценятся:)

Answer 1

Реакция заключается в том, чтобы контейнер обрабатывал состояние и передавал его через подпорки на входы (компоненты). Таким образом, на самом деле не нужно выполнять реакцию-избыточность, чтобы обрабатывать валидацию, если вы не строите несколько маршрутов и нуждаетесь в этом глобальном состоянии.

Answer 2

Посмотрите на эту ссылку

И этот ответ тоже стековый ответ

Answer 3

Мне нравится использовать Formik для форм в React. Основные преимущества:

• Сообщения о проверке и ошибках
• Состояние обработки форм
• Обработка отправки формы

И это хорошая идея использовать Yup (валидатор схемы) с Formik.

Вот пример формы с Formik + Yup:

yarn add formik yup

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  : Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  email: Yup.string()
    .email('Invalid email')
    .required('Required'),
});

export const ValidationSchemaExample = () => (
  <div>
    <h1>Signup</h1>
    <Formik
      initialValues={{
        name: '',
        email: '',
      }}
      validationSchema={SignupSchema}
      onSubmit={values => {
        // same shape as initial values
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="name" />
          {errors.name && touched.name ? (
            <div>{errors.name}</div>
          ) : null}
          <Field name="email" type="email" />
          {errors.email && touched.email ? <div>{errors.email}</div> : null}
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);