我正在尝试使用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];
}
}
}
}
}
}