反应原生打字稿如何键入 FlatList

如何解决反应原生打字稿如何键入 FlatList

我没有找到在 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 |只读)： FlatList'，给出了以下错误。 类型 '({ data,}: { data: Category; }) => JSX.Element' 不能分配给类型 'ListRenderItem'。 参数“__0”和“info”的类型不兼容。 “ListRenderItemInfo”类型中缺少属性“data”，但类型“{ data: Category;”中需要。 }'。重载 2 of 2,'(props: FlatListProps,context: any): FlatList'，出现以下错误。 类型 '({ data,}: { data: Category; }) => JSX.Element' 不可分配给类型 'ListRenderItem

请问怎么了？

解决方法

renderItem 有接口 ListRenderItem ，所以“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

,

我认为这里的错误描述了出了什么问题：“属性 '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>