Javascript 为什么在Formik中创建验证时出现错误？

我使用“Formik”库实现表单

我有以下代码：

import { useFormik } from 'formik';
import * as yup from 'yup';
import FInput from './FInput/FInput';

const Form = () => {
    const {handleSubmit, values, handleChange} = useFormik({
      initialValues: {
          username: '',
          email: '',
          password: '',
          confirm_password: '',
      },
        validationSchema: yup.object().shape( schema: {
          username: yup.string()                            // the error here
           .required('This field is required'),
          email: yup.string()
           .required('This field is required')
           .email('This field is required'),
          password: yup.string()
           .required('This field is required')
           .min(6, 'This password is too short')
           .max(30, 'This passwors is too long'),
        confirm_password: yup.string()
        .oneOf([yup.ref(key:'password'), null])
        .required('This field is required'),                                    
      }),
      onSubmit: (formValues) => {
          console.log('submit', formValues);
      },    
    });
    
   return (
   <form className="fform" onSubmit={handleSubmit}>
       <FInput
         label="username"
         id="username" 
         inputProps={{
           name:'username',
           value: values.username,
           onChange: handleChange,
       }}
       />
      <FInput
         label="email"
         id="email" 
         inputProps={{
           name:'email',
           value: values.email,
           onChange: handleChange,
           type: 'email',
       }}
       />
       <FInput
         label="password"
         id="password" 
         inputProps={{
           name:'password',
           value: values.password,
           onChange: handleChange,
           type:'password',
       }}
       />
       <FInput
         label="Confirm password"
         id="confirm_password" 
         inputProps={{
           name:'confirm_password',
           value: values.confirm_password,
           onChange: handleChange,
           type:'password',
       }}
       />
       <button type="submit">Submit Form</button>
   </form>
   );
};

export default Form;

从'formik'导入{useFormik}；
从“是”以是的形式导入*；
从“./FInput/FInput”导入FInput；
常数形式=（）=>{
常量{handleSubmit，value，handleChange}=useFormik({
初始值：{
用户名：“”，
电子邮件：“”，
密码：“”，
确认密码：“”，
},
validationSchema:yup.object（）.shape（架构：{
用户名：yup.string（）//这里的错误
.required（“此字段为必填项”），
电子邮件：yup.string（）
.required（'此字段为必填项'）
.email（“此字段为必填项”），
密码：yup.string（）
.required（'此字段为必填项'）
.min（6，‘此密码太短’）
.max（30，“此密码太长”），
确认密码：yup.string（）
.oneOf（[yup.ref（key:'password'），null]）
.required（“此字段为必填项”），
}),
onSubmit：（formValues）=>{
console.log（'submit'，formValues）；
},    
});
返回(
提交表格
);
};
导出默认表单；

我有一个错误：

第18:25行：分析错误：意外的保留类型字符串

18 |用户名：yup.string（）

顺便说一下，

username

在文本编辑器中不会以彩色突出显示。

---

如何修复错误？我已多次查看代码，无法理解错误的原因。请帮助解决此问题。

object.shape

API将包含字段的对象作为参数

Formik的Yup定义必须是：

validationSchema: yup.object().shape({
  username: yup.string()                            
           .required('This field is required'),
  email: yup.string()
           .required('This field is required')
           .email('This field is required'),
  password: yup.string()
           .required('This field is required')
           .min(6, 'This password is too short')
           .max(30, 'This passwors is too long'),
  confirm_password: yup.string()
        .oneOf([yup.ref(key:'password'), null])
        .required('This field is required'),   
})