避免对象可能未定义

时间:2020-08-08 01:26:50

标签: typescript react-native formik

我正在尝试使用React Native中的formik制作一个可以处理数组的输入(因此输入是动态n +)。它可以工作,但打字稿会抱怨“对象可能未定义”和“元素隐式具有'any'类型,因为索引表达式不是'number'类型”,代码也很丑陋,我不喜欢它,还有另一种方法使这个?我认为我的问题是在FormikPropsWrap中定义了formikProps的类型。

formikProps具有错误,touched和values属性,但是如果我不与表单错误交互,则touched可以为空。

{
values: {menus: [{
name: 'dish1'
price: '10'
}, ...]}
errors: {},
touched: {}
}

互动之后

{
values: {menus: [{
name: 'dish1'
price: '10'
}, ...]}
errors: {menus: [{name: 'errorx', price: 'error' }],
touched: {menus: [{name: true, price: true }]}
}

这种道具的一个例子是:

preFormikKey ='菜单'

index = 0 //可以为N

postFormikKey ='名称'//可以是价格或名称

接口

interface ComponentProps {
    formikKey: string;
    preFormikKey?: string;
    index?: number;
    postFormikKey?: string;
}

interface InitialState {
    [key: string]: string | any[];
}

interface FormikPropsWrap {
    formikProps: FormikProps<InitialState>;
}

丑陋的代码

if (preFormikKey) {
            if (index || index === 0) {
                if (postFormikKey) {
                    if (preFormikKey in formikProps.errors) {
                        const errorMenus: any = formikProps.errors[preFormikKey];
                        if (index in errorMenus) {
                           // line below  object is posibly undefined
                            const errorMenuIndex: any = formikProps.errors[preFormikKey][index];
                            if (postFormikKey in errorMenuIndex) {
                                // line below object is posibly undefined 
                                //and "Element implicitly has an 'any' type because index expression is not of type 'number'" in postFormikKey
                                errorMessage = formikProps.errors[preFormikKey][index][postFormikKey];
                            }
                        }
                    }
                    if (preFormikKey in formikProps.values) {
                        const valuesMenus: any = formikProps.values[preFormikKey];
                        if (index in valuesMenus) {
                            const valuesMenuIndex: any = formikProps.values[preFormikKey][index];
                            if (postFormikKey in valuesMenuIndex) {
                                value = formikProps.values[preFormikKey][index][postFormikKey];
                            }
                        }
                    }
                    if (preFormikKey in formikProps.touched) {
                        const touchedMenus: any = formikProps.touched[preFormikKey];
                        if (index in touchedMenus) {
                            const touchedMenuIndex: any = formikProps.touched[preFormikKey][index];
                            if (postFormikKey in touchedMenuIndex) {
                                touched = formikProps.touched[preFormikKey][index][postFormikKey];
                            }
                        }
                    }
                }
            }
        }

0 个答案:

没有答案