我使用的是一个YUP模式,它的Reaction-Hook-Form是useFieldArray,我想测试每个变量的pageRedirectId与表单的pageId是不同的.问题是,我似乎无法从测试方法中访问pageId的值.

我试图从ctx,this访问它,但它不在那里-它似乎只能访问每个变量的表单值,而不是整个表单值.

有谁知道解决这个问题的办法吗?以下是我的方案:



export const schema = (user: User) =>
    Yup.object().shape({
        name: Yup.string().required('Enter a name'),
        websiteId: Yup.string().required('Select a website'),
        pageId: Yup.string().required('Select a page'),
        variants: Yup.array()
            .of(
                Yup.object()
                    .shape({
                        name: Yup.string().required('Enter a variant name'),
                        pageRedirectId: Yup.string(),
                    })
                    .test(
                        'redirects to the same page',
                        'You cannot redirect to the same page. Choose a different page to redirect to',
                        function (value, ctx) {
                            const { pageRedirectId } = value;
                            const pageId = '@todo'; // how can I get the pageId?
                            // @ts-ignore
                            const path = `variants[${ctx.options.index}].pageRedirectId`;

                            if (pageRedirectId === pageId) {
                                return this.createError({
                                    message: 'A variant cannot have the same page redirect as the main page',
                                    path,
                                });
                            }

                            return true;
                        }
                    )
            )
            .min(2, 'At least one variant is required')
            .required('Add at least one variant')
});

variants使用Reaction-Hook-Form的useFieldArray.我似乎也不会使用我在其他帖子中看到的when方法,尽管我不太熟悉它.

任何帮助都将非常感谢,因为我不确定从这里到哪里go ,除了可能将整个表单的值传递给createTestSchema函数,比如user是如何传递的.

推荐答案

更新2023-07-10:不需要createError,答案是简化代码.

这里的问题是如何访问父母在.test内的父母.

解决方案是在.test中传入上下文,并使用context.from[1].value访问模式.要得到pageId,请使用context.from[1].value.pageId.

有关该方法的更多细节,请查看here.

请注意,为简洁起见,我对您的代码进行了一些简化.不需要在代码中构建路径;它是在上下文中提供的(见下文).

Yup.object().shape({
    name: Yup.string().required('Enter a name'),
    websiteId: Yup.string().required('Select a website'),
    pageId: Yup.string().required('Select a page'),

    variants: Yup.array(
        Yup.object({
            name: Yup.string().required('Enter a variant name'),
            pageRedirectId: Yup.string()
               .required('Some required text here'),
               .test(
                   'redirects to the same page',
                   'A variant cannot have the same page redirect as the main page',
                   (pageRedirectId, {from}) => // deconstruct of context
                       // @ts-ignore
                       pageRedirectId !== from[1].value.pageId
              )
              ...

代码是Testet,并在Reaction/Vite应用程序中进行了验证,具有类似的要求.是的:1.2.0

Reactjs相关问答推荐

使用useEffect挂钩获取数据

useTranslation不会在languageChanged上重新呈现组件

Reaction-Query&-使用Mutation触发成功,而应该触发错误

如何在NextJS中仅在刷新页面和页面淡出页面过渡时添加全屏加载器

无法找出状态正在被更改的位置

状态更改是否卸载功能组件

使用 React + Vite 范围化 CSS

React 在第一次渲染时为 null

在reactjs中刷新页面时丢失状态值

无法使用 MongoDB Atlas 和 Next.js 删除正确的帖子

i18next中复数键的理解

卸载 React 组件时未清除本地存储项目

使用 toast 时挂钩调用无效

需要先填写依赖输入字段,以便其他人工作

Wordpress 插件在激活时创建一个 React Public 页面

如何通过onpress on view in react native flatlist来降低和增加特定视图的高度?

React 中的 Slide API Mui 在开始而不是结束时触发侦听器

渲染的钩子比预期的少.这可能是由 React Hooks 中意外的提前返回语句引起的

如果查询不存在,如何返回所有产品?

点击提交后自动添加#