传递 id 时，无法将类型 'undefined' 分配给类型 'number'

Question

每当我在文本内传递OnPressItem中的项目id时，(item?.id)显示未定义不能分配给类型'number '时，我就会遇到问题。还有什么方法可以声明id是号码?

export interface MeetingListProps {
data?: Meetings
style?: StyleProp<ViewStyle>
onPressItem: (id: number) => void //here define the onPressItem
const { onPressItem } = props
}
const { data, loading, error } = useGetMeetingsQuery
return (
<View style={styles.container}>
{data?.meetings &&
data.meetings.map((item) => {
return (
<View>
<Text style={styles.item} onPress={() => onPressItem(item?.id)}>{item?.title}</Text>
</View>
)
})}
</View>

Answer 1

当您使用可选链接(?.语法)的结果值可以是您的值(item.id)或未定义，如果项目是空或未定义。所以item?.id的类型是number | undefined。简单的解决方案是，如果你的数组里面没有空值，删除可选的链接操作符，或者在调用函数onPressItem

之前检查项。

onPress={() => item ? onPressItem(item.id) : {}}

Answer 2

你还应该能够通过为item提供一个类型来告诉Typescript如果item存在就期望得到一个数字。

export interface MeetingListProps {
onPressItem: (id: number) => void; //here define the onPressItem
}
type IItem = {
id: number;
title: string;
};
type IQuery = () => {
data: { meetings: IItem[] };
loading: boolean;
error: {};
};
const useGetMeetingsQuery: IQuery = () => {
return { data: { meetings: [] }, loading: true, error: {} };
};
export default function Item(props: MeetingListProps) {
const { onPressItem } = props;
const { data, loading, error } = useGetMeetingsQuery();
return (
<div>
{data?.meetings &&
data.meetings.map((item) => {
return (
<div>
<p onClick={() => onPressItem(item?.id)}>{item?.title}</p>
</div>
);
})}
</div>
);
}

游乐场