我找不到在react native中键入FlatList的方法
export interface Category {
id: string;
title: string;
bg: string;
}
export const CATEGORIES: Category[] = [
{ id: "c1", title: "Italian", bg: "#f5428d" }
];
const Item = ({ data }: { data: Category }) => (
<View style={styles.item}>
<Text style={styles.title}>{data.title}</Text>
</View>
);
const CategoriesScreen = ({ navigation }: CategoriesScreenProps) => {
const renderItem = ({
data,
}: {
data: Category;
}) => <Item data={data} />;
return (
<FlatList
data={CATEGORIES}
keyExtractor={(item) => item.id}
renderItem={renderItem}
numColumns={2}
></FlatList>
);
};
我在renderItem props中遇到了这个错误:
没有与此调用匹配的重载。重载1/2,'(props:平面列表属性|只读):FlatList“,出现以下错误。请键入”({ data,}:{数据:类别;})=〉“JSX.Element”无法赋值给类型“ListRenderItem”。参数类型“__0”和“info”不兼容。类型“ListRenderItemInfo”中缺少属性“data”,但类型“{ data:类别;}'.超载2/2,'( prop :平面列表属性,上下文:any):FlatList“时,出现以下错误。请键入”({ data,}:{数据:类别;})=〉“JSX.Element”不能赋给类型“ListRenderItem
怎么了,拜托?
5条答案
按热度按时间vyswwuz21#
我知道这是超级老,但我想我可能有你最终寻找的解决方案。我想我们一定是走过同一教程,因为我遇到了这个完全相同的问题,完全相同的打字问题。
如果我理解正确的话,其他人在这里说的话在技术上是正确的;
FlatList
使用的数据将是ListRenderItem<T>
,但是,由ListRenderItem
Package 的传递给为renderItem
属性定义的函数的单个数据项实际上是ListRenderItemInfo<T>
类型,因此,您应该能够像我在下面键入itemData
参数一样键入函数参数:其中
Category
为:我通过深入研究
FlatList
的定义及其类型发现了这一点:我相信你早就解决了这个问题,但希望它能帮助其他人处理同样的打字问题。
9nvpjoqh2#
renderItem有接口ListRenderItem< ItemT >,所以“data”参数不存在,因为ListRenderItem只知道“item”、“index”和“separator”,尝试用你的数据替换它的ItemT。
你要怎么做?很简单:
第一步-从react-native导入ListRenderItem接口,
第二步-输入接收renderItem函数的常量而不是参数,用你的项目接口替换它的“ItemT”:
就是它!!想看看代码吗?在这里:expo snack
y53ybaqx3#
我认为这里的错误描述了发生了什么错误:“属性'data'在类型'ListRenderItemInfo'中丢失,但在类型'{ data:类别;}'”。
您需要传递一个具有“data”属性的对象,但您没有传递。
或
e37o9pze4#
你可以试着这样写:
6yt4nkrj5#
flatList组件将数组中的每一项作为一个名为
item
的变量传递给renderItem
属性。因此,需要将data
替换为item
,如下所示: