React Native类型脚本如何键入FlatList

xtfmy6hx  于 2023-03-03  发布在  React
关注(0)|答案(5)|浏览(164)

我找不到在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
怎么了,拜托?

vyswwuz2

vyswwuz21#

我知道这是超级老,但我想我可能有你最终寻找的解决方案。我想我们一定是走过同一教程,因为我遇到了这个完全相同的问题,完全相同的打字问题。
如果我理解正确的话,其他人在这里说的话在技术上是正确的;FlatList使用的数据将是ListRenderItem<T>,但是,由ListRenderItem Package 的传递给为renderItem属性定义的函数的单个数据项实际上是ListRenderItemInfo<T>类型,因此,您应该能够像我在下面键入itemData参数一样键入函数参数:

import { FlatList, ListRenderItemInfo } from "react-native"
import { CategoryGridTile } from "irrelevant"
import { CATEGORIES } from "irrelevant"
import Category from "irrelevant"

export const CategoriesScreen: React.FC = () => {
    return <FlatList
        data={CATEGORIES}
        keyExtractor={(item) => item.id}
        renderItem={renderCategoryItem}
    />
}

const renderCategoryItem = (itemData: ListRenderItemInfo<Category>) => {
    return <CategoryGridTile title={itemData.item.title} color={itemData.item.color} />
}

其中Category为:

class Category {
  constructor(id, title, color) {
    this.id = id
    this.title = title
    this.color = color
  }
}

我通过深入研究FlatList的定义及其类型发现了这一点:

export interface ListRenderItemInfo<ItemT> {
    item: ItemT;

    index: number;

    separators: {
        highlight: () => void;
        unhighlight: () => void;
        updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
    };
}

export type ListRenderItem<ItemT> = (info: ListRenderItemInfo<ItemT>) => React.ReactElement | null;

我相信你早就解决了这个问题,但希望它能帮助其他人处理同样的打字问题。

9nvpjoqh

9nvpjoqh2#

renderItem有接口ListRenderItem< ItemT >,所以“data”参数不存在,因为ListRenderItem只知道“item”、“index”和“separator”,尝试用你的数据替换它的ItemT。
你要怎么做?很简单:
第一步-从react-native导入ListRenderItem接口,

import { ListRenderItem } from 'react-native';

第二步-输入接收renderItem函数的常量而不是参数,用你的项目接口替换它的“ItemT”:

const renderItem: ListRenderItem<Category> = ({ item }) => (
   <Item data={item} />
)

就是它!!想看看代码吗?在这里:expo snack

y53ybaqx

y53ybaqx3#

我认为这里的错误描述了发生了什么错误:“属性'data'在类型'ListRenderItemInfo'中丢失,但在类型'{ data:类别;}'”。

const renderItem  = ({data}: {data: Category}) => <Item data={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>
e37o9pze

e37o9pze4#

你可以试着这样写:

<FlatList<Category>
      data={CATEGORIES}
      .....
6yt4nkrj

6yt4nkrj5#

flatList组件将数组中的每一项作为一个名为item的变量传递给renderItem属性。因此,需要将data替换为item,如下所示:

const renderItem  = ({item}: {item: Category}) => <Item data={item} />;

<FlatList
    data={CATEGORIES}
    keyExtractor={(item) => item.id}
    renderItem={renderItem}
    numColumns={2}
></FlatList>

相关问题