typescript - React-Redux、Yup 和 formik 的表单验证问题

Question

当我尝试使用 Formik 和 Redux 使用 Yup 验证输入数据时遇到问题。在 Redux 之前它工作得很好，但是由于我使用 Redux 扩展了我的应用程序，Yup 的行为就像输入中没有数据一样，但它就在那里。我会将我的代码减少到只有一个输入，但每三个输入都是相同的行为

图像

    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;

标签： typescriptreact-reduxformikyup