为什么我的 Yup 验证条件出现错误?

Why am I getting an error in my Yup validation's is condition?

提问人:3aQaRyAn 提问时间:11/17/2023 最后编辑:isherwood3aQaRyAn 更新时间:11/18/2023 访问量:45

问:

我正在处理一个 TypeScript 项目,我使用 Yup 进行表单验证。我遇到了函数和条件的问题。TypeScript 抛出与类型相关的错误 (TS2769),我无法解决它。whenis

export type TClubFormData = {
  title: string;
  description: string;
  info: string;
  city: string;
  address: string;
  phone: string;
  picture: File | null;
  pictureUrl: string;
  latitudeMap: string;
  longitudeMap: string;
  openingTime: string;
  closingTime: string;
};
 const initialValues: TClubFormData = {
    title: (club && club.title) || '',
    description: (club && club.description) || '',
    info: (club && club.info) || '',
    address: (club && club.address) || '',
    city: (club && club.city) || '',
    phone: (club && club.phone) || '',
    picture: null,
    pictureUrl: (club && club.picture) || '',
    latitudeMap: (club && club.latitudeMap) || '',
    longitudeMap: (club && club.longitudeMap) || '',
    openingTime: (club && club.openingTime) || '00:00',
    closingTime: (club && club.closingTime) || '00:00',
  };
export const CreateAndEditClubFormSchema = Yup.object().shape({
  title: Yup.string().required('Անվանումը պարտադիր է'),
  description: Yup.string().required('Նկարագիրը պարտադիր է'),
  info: Yup.string(),
  city: Yup.string().required('Քաղաքը պարտադիր է'),
  address: Yup.string().required('Հասցեն պարտադիր է'),
  phone: Yup.string(),
  // picture: Yup.mixed().nullable().required('Նկարը պարտադիր է'),
  picture: Yup.mixed().when('pictureUrl', {
    is: (pictureUrl: string) => !pictureUrl, // ERROR HERE
    then: Yup.mixed().nullable().required('Նկարը պարտադիր է'),
    otherwise: Yup.mixed().nullable(),
  }),
  latitudeMap: Yup.string().matches(
    /^(\+|-)?((\d((\.)|\.\d{1,6})?)|(0*?[0-8]\d((\.)|\.\d{1,6})?)|(0*?90((\.)|\.0{1,6})?))$/,
    'Սխալ կորդինատային լայնություն'
  ),
  longitudeMap: Yup.string().matches(
    /^(\+|-)?((\d((\.)|\.\d{1,6})?)|(0*?\d\d((\.)|\.\d{1,6})?)|(0*?1[0-7]\d((\.)|\.\d{1,6})?)|(0*?180((\.)|\.0{1,6})?))$/,
    'Սխալ կորդինատային երկայնություն'
  ),
  openingTime: Yup.string().required('Opening time is required'),
  closingTime: Yup.string().required('Closing time is required'),
});
TS2769: No overload matches this call.
Overload  1  of  4 ,
(keys: string | string[], builder: ConditionBuilder<MixedSchema<AnyPresentValue | undefined, AnyObject, undefined, "">>): MixedSchema<...>
, gave the following error.
Argument of type
{     is: (pictureUrl: string) => boolean;     then: Yup.MixedSchema<AnyPresentValue, Yup.AnyObject, undefined, "">;     otherwise: Yup.MixedSchema<AnyPresentValue | null | undefined, Yup.AnyObject, undefined, "">; }
is not assignable to parameter of type
ConditionBuilder<MixedSchema<AnyPresentValue | undefined, AnyObject, undefined, "">>
Object literal may only specify known properties, and  is  does not exist in type
ConditionBuilder<MixedSchema<AnyPresentValue | undefined, AnyObject, undefined, "">>

如何解决此错误?

JavaScript reactjs next.js formik 是的

评论

1赞 mandy8055 11/17/2023
你试过用 ?像这样:istesttest: (pictureUrl: string) => !pictureUrl
0赞 Wyck 11/17/2023
因为这是一个打字稿错误(不是 JavaScript 错误),所以我认为这应该有一个打字稿标签。
0赞 3aQaRyAn 11/17/2023
@Wyck我只是使用测试而不是是
1赞 3aQaRyAn 11/17/2023
@mandy8055 非常感谢你,这对我有用

答:

1赞 3aQaRyAn 11/17/2023 #1

这对我有用

picture: Yup.mixed()
            .test('is-picture-url-empty', 
                  'Նկարը պարտադիր է', function () {
const pictureUrl = this.resolve(Yup.ref('pictureUrl')); 
return pictureUrl 
? true 
   : this.createError
       ({ path: this.path, 
          message: 'Նկարը պարտադիր է' }); 
}).nullable(),
// ... rest of code