我没有找到在 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 道具中遇到了这个错误:
<块引用>没有与此调用匹配的过载。重载 1 of 2, '(props:
FlatListProps |只读
请问怎么了?
答案 0 :(得分:0)
renderItem 有接口 ListRenderItem< ItemT > ,所以“data”参数不存在,因为 ListRenderItem 只知道“item”、“index”和“separator”。尝试用您的数据替换其 ItemT。
你是怎么做到的? 很简单:
1st - 从 react-native 导入 ListRenderItem 接口,
import { ListRenderItem } from 'react-native';
2nd - 输入接收 renderItem 函数的常量而不是参数,用你的项目界面替换它的“ItemT”:
const renderItem: ListRenderItem<Category> = ({ item }) => (
<Item data={item} />
)
就是这样!!想看看代码吗?在这里:expo snack
答案 1 :(得分:0)
我认为这里的错误描述了出了什么问题:“属性 'data' 在类型 'ListRenderItemInfo' 中丢失,但在类型 '{ data: Category; }' 中是必需的。”
const renderItem = ({data}: {data: Category}) => <Item data={data} />
您需要传递一个具有“数据”属性的对象,但您没有。
<FlatList
data={CATEGORIES}
keyExtractor={(item) => item.id}
renderItem= {renderItem} // {(receivesArg)=>renderItem(passArg)}
numColumns={2}
></FlatList>
或
<FlatList
data={CATEGORIES}
keyExtractor={(item) => item.id}
// import {ReactElement} from "react"
renderItem= {({ data }:data: Category;}):ReactElement => <Item data={data} />}
numColumns={2}
></FlatList>