Javascript TypeError:架构[sync？'；validateSync'；：'；validate'；]不是一个函数

我试图使用Formik和Yup验证一个材料ui表单，但我得到了一个错误

这是我从另一个文件导入的模式

export const schema = Yup.object({
  email: Yup.string()
    .email('Invalid Email')
    .required('This Field is Required'),
});

这就是我使用验证的地方。 如果我写

validation=schema

，它没有给出错误，但也没有验证。如果我将其更改为

{schema}

应用程序将崩溃

export default function RemoveUserPage() {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isRemoved, setIsRemoved] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const [removeUser] = useMutation(REMOVE_USER);

  let submitForm = (email: string) => {
    setIsSubmitted(true);
    removeUser({
      variables: {
        email: email,
      },
    })      
  };

  const formik = useFormik({
    initialValues:{ email: '' },
    onSubmit:(values, actions) => {
       setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
          }, 1000);
        },
       validationSchema:{schema}
    })

    const handleChange = (e: ChangeEvent<HTMLInputElement>)=>{
      const {name,value} = e.target;
      formik.setFieldValue(name,value);
     }

  return (
    <div>
              <Form
                onSubmit={e => {
                  e.preventDefault();
                  submitForm(formik.values.email);
                }}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={formik.touched.email ? formik.errors.email : ''}
                    error={formik.touched.email && Boolean(formik.errors.email)}
                    label="Email"
                    value={formik.values.email}
                    //onChange={change.bind(null, 'email')}
                    onChange={formik.handleChange}
                  />
                  <br></br>
                  <CustomButton
                    disabled={!formik.values.email}
                    text={'Remove User'}
                  />
                </div>
              </Form>
    </div>
  );
}

早些时候，我使用的是

。在这种情况下，验证是在我打字时完成的，例如，如果我写“hfs”，它会在我打字时立即告诉我无效的电子邮件。但是，使用useFormik（根据下面的答案），只有在我提交表单后，它才会显示无效电子邮件。我不希望发生这种情况，因为一旦提交表单，也会调用变异。我想把验证分开。这是我之前使用的

export default function RemoveUserPage() {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isRemoved, setIsRemoved] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const [removeUser] = useMutation<DeleteUserResponse>(REMOVE_USER);

  let submitForm = (email: string) => {
    setIsSubmitted(true);
    removeUser({
      variables: {
        email: email,
      },
    })
      .then(({ data }: ExecutionResult<DeleteUserResponse>) => {
        if (data !== null && data !== undefined) {
          setIsRemoved(true);
        }
      })
  };

  return (
    <div>
      <Formik
        initialValues={{ email: '' }}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
        }}
        validationSchema={schema}>
        {props => {
          const {
            values: { email },
            errors,
            touched,
            handleChange,
            isValid,
            setFieldTouched,
          } = props;
          const change = (name: string, e: FormEvent) => {
            e.persist();
            handleChange(e);
            setFieldTouched(name, true, false);
          };
          return (
            <Wrapper>
              <Form
                onSubmit={e => {
                  e.preventDefault();
                  submitForm(email);
                }}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ''}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, 'email')}
                  />
                  <br></br>
                  <CustomButton
                    disabled={!isValid || !email}
                    text={'Remove User'}
                  />
                </div>
              </Form>
          );
        }}
      </Formik>
    </div>
  );
}

导出默认函数RemoveUserPage（）{
const[isSubmitted，setIsSubmitted]=useState（false）；
const[isRemoved，setIsRemoved]=useState（false）；
常量[errorMessage，setErrorMessage]=使用状态（“”）；
常量[removeUser]=使用变异（删除用户）；
让submitForm=（电子邮件：string）=>{
setIsSubmitted（true）；
移除用户({
变量：{
电邮:电邮,，
},
})
.then（{data}:ExecutionResult）=>{
if（数据！==null&&data！==未定义）{
setIsRemoved（true）；
}
})
};
返回(
{
设置超时（（）=>{
警报（JSON.stringify（值，null，2））；
动作。设置提交（错误）；
}, 1000);
}}
validationSchema={schema}>
{props=>{
常数{
值：{email}，
错误，
感动的，
handleChange，
是有效的，
塞特菲尔德被感动了，
}=道具；
常量更改=（名称：字符串，e:FormEvent）=>{
e、 坚持（）；
handleChange（e）；
setFieldTouched（名称、真、假）；
};
返回(
{
e、 预防默认值（）；
提交表格（电邮）；
}}>



);
}}
);
}

它应该是validationSchema:schema，而不是{schema}

它无法验证的原因是您没有使用formik的handleSubmit

useFormik({
initialValues:{ email: '' },
onSubmit:(values, actions) => {
   setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      actions.setSubmitting(false);
      }, 1000);
    },
   validationSchema: schema
})

...

<Form onSubmit={formik.handleSubmit}>
  ...
  <CustomButton
       disabled={formik.touched.email && formik.errors.email ? true : false}
       text={'Remove User'}
  />
  ...
</Form>

useFormik({
初始值：{电子邮件：'}，
onSubmit：（值、操作）=>{
设置超时（（）=>{
警报（JSON.stringify（值，null，2））；
动作。设置提交（错误）；
}, 1000);
},
验证模式：模式
})
...
...
...

它应该使用formik的handleSubmit来获得您在validationSchema上定义的验证

同时将formik.touch.email和&formik.errors.email传递给按钮的禁用道具

根据您的请求，要在键入时验证字段，应执行以下操作：

<TextField
        variant="outlined"
        margin="normal"
        id="email"
        name="email"
        helperText={formik.touched.email ? formik.errors.email : ""}
        error={formik.touched.email && Boolean(formik.errors.email)}
        label="Email"
        value={formik.values.email}
        onChange={props => {
          formik.handleChange(props);
          formik.handleBlur(props);
        }}
        onBlur={formik.handleBlur}
      />

{
福米克手换（道具）；
福米克车把（道具）；
}}
onBlur={formik.handleBlur}
/>

它应该是validationSchema:schema，而不是{schema}

它无法验证的原因是您没有使用formik的handleSubmit

useFormik({
initialValues:{ email: '' },
onSubmit:(values, actions) => {
   setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      actions.setSubmitting(false);
      }, 1000);
    },
   validationSchema: schema
})

...

<Form onSubmit={formik.handleSubmit}>
  ...
  <CustomButton
       disabled={formik.touched.email && formik.errors.email ? true : false}
       text={'Remove User'}
  />
  ...
</Form>

useFormik({
初始值：{电子邮件：'}，
onSubmit：（值、操作）=>{
设置超时（（）=>{
警报（JSON.stringify（值，null，2））；
动作。设置提交（错误）；
}, 1000);
},
验证模式：模式
})
...
...
...

它应该使用formik的handleSubmit来获得您在validationSchema上定义的验证

同时将formik.touch.email和&formik.errors.email传递给按钮的禁用道具

根据您的请求，要在键入时验证字段，应执行以下操作：

<TextField
        variant="outlined"
        margin="normal"
        id="email"
        name="email"
        helperText={formik.touched.email ? formik.errors.email : ""}
        error={formik.touched.email && Boolean(formik.errors.email)}
        label="Email"
        value={formik.values.email}
        onChange={props => {
          formik.handleChange(props);
          formik.handleBlur(props);
        }}
        onBlur={formik.handleBlur}
      />

{
福米克手换（道具）；
福米克车把（道具）；
}}
onBlur={formik.handleBlur}
/>

useFormik的类型是什么？它在哪里声明？我想它应该是

validationSchema:schema

而不是

validationSchema:{schema}

.Wdym？它是从'formik'导入{useFormik}我已经提到了初始值（email）@bergi

useFormik

的类型是什么？它在哪里声明？我想它应该是

validationSchema:schema

而不是

validationSchema:{schema}

.Wdym？它是从'formik'导入{useFormik}我提到了初始值（email）@BergiI也在调用onSubmit中的另一个函数。不能同时使用Formik的handleSubmit和my SubmitForm（）函数吗？我尝试了这个，但是没有验证：

onSubmit={e.preventDefault（）；submitForm（formik.values.email）；formik.handleSubmit（）；}}>

实际上，如果我使用

onSubmit={formik.handleSubmit}

也不起作用。因此，也许我遗漏了一些东西，比如你的CustomButton的类型“提交”？是的，它是提交的。你能检查表单中的控制台吗？如果它被处理了？{console.log（'hello'）}>我还在onSubmit中调用另一个函数。不能同时使用Formik的handleSubmit和my SubmitForm（）函数吗？我尝试了这个，但是没有验证：

onSubmit={e.preventDefault（）；submitForm（formik.values.email）；formik.handleSubmit（）；}}>

实际上，如果我使用

onSubmit={formik.handleSubmit}

也不起作用。因此，也许我遗漏了一些东西，比如你的CustomButton的类型“提交”？是的，它是提交的。你能检查表单中的控制台吗？如果它被处理了？{console.log（'hello'）}