Проблема проверки формы с React-Redux, Yup и formik - PullRequest
Новая
       70

Проблема проверки формы с React-Redux, Yup и formik

0 голосов
/ 22 февраля 2020

У меня проблема, когда я пытаюсь проверить входные данные с Yup, используя Formik и Redux. До Redux он работал просто отлично, но, поскольку я расширил свое приложение с помощью Redux, Yup действует так, как будто во входных данных нет данных, но они есть. Я уменьшу свой код только до одного ввода, но это будет одинаковое поведение для каждых 3 из них

img 

    import CustomTextField from "./CustomTextField";
    import { validationSchema } from "./schemas/schemas";


    const MainForm: React.FC = () => {
      const formValue = useSelector((state: any) => state.form);
      const dispatch = useDispatch();

    return (
    <div>
      <Formik
        initialValues={{...}}
        validationSchema={validationSchema}
        onSubmit={() => {
          dispatch(isFormSaved(true));
        }}
      >
        {({ isSubmitting }) => (
          <Form style={{ display: "flex", flexDirection: "column" }}>
            <CustomTextField
              placeholder="Title"
              name="title"
              type="input"
              value={formValue.title}
            />
            <Button disabled={isSubmitting} type="submit">
              Submit
            </Button>
          </Form>
        )}
      </Formik>
    </div>
    );
    };

    export default MainForm;

и customTextField: 

const CustomTextField: React.FC<FieldAttributes<{}>> = ({
  placeholder,
  ...props
}) => {


  const [field, meta] = useField<{}>(props);
  const errorText = meta.error && meta.touched ? meta.error : "";
  const dispatch = useDispatch();

  return (
    <TextField
      placeholder={placeholder}
      {...field}
      helperText={errorText}
      error={!!errorText}
      value={props.value}
      onChange={(event: SyntheticEvent) => {
        dispatch(saveForm(event));
    }}
    ></TextField>
  );
};

export default CustomTextField;
...