反应本机打字稿如何键入 FlatList

Posted 2023-03-13

【中文标题】反应本机打字稿如何键入 FlatList

【英文标题】：React native typescript how to type FlatList

【发布时间】：2021-10-04 14:23:23

【问题描述】：

我找不到在 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: 平面列表道具 |只读): FlatList'，给出了以下错误。 类型 '( data, : data: Category; ) => JSX.Element' 不可分配给类型 'ListRenderItem'。 参数 '__0' 和 'info' 的类型不兼容。 “ListRenderItemInfo”类型中缺少属性“数据”，但类型“数据：类别; '。重载 2 of 2, '(props: FlatListProps, context: 任何）：FlatList'，给出了以下错误。 类型 '( data, : data: Category; ) => JSX.Element' 不可分配给类型 'ListRenderItem

请问怎么了？

【问题讨论】：

将data 更改为item

【参考方案1】：

renderItem 具有接口 ListRenderItem ，因此“data”参数不存在，因为 ListRenderItem 只知道“item”、“index”和“separator”。尝试用您的数据替换它的 ItemT。

你是怎么做到的？ 很简单：

1st - 从 react-native 导入 ListRenderItem 接口，

import  ListRenderItem  from 'react-native';

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

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

就是这样！！想看看代码吗？这里是：expo snack

【讨论】：

感谢您的回复，但现在我收到此错误类型 '( data, : data: Category; ) => JSX.Element' is notassignable to type 'ListRenderItem'。参数 '__0' 和 'info' 的类型不兼容。类型“ListRenderItemInfo”中缺少属性“数据”，但类型“数据：Category; '.ts(2322)

【参考方案2】：

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

【参考方案3】：

你可以试试这样写：

<FlatList<Category>
      data=CATEGORIES
      .....