【问题标题】:Item of key extractor has type unknown - React Native密钥提取器的项目类型未知 - React Native
【发布时间】:2020-07-25 18:30:16
【问题描述】:

如何在 React Native 中为 FlatListrenderItem 处理程序定义类型?

这就是我目前的处理方式:

// Importing the generic type of the FlatList render item handler
import { ListRenderItem } from "react-native";

// Associating the type to the handler 
const renderItem: ListRenderItem<Bill> = useCallback(({ item }) => (
    <BillCard
      id={item.id}
      name={item.name}
      icon={item.icon}


{...}

return (
    <List
      data={bills}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
    />
  );

但很遗憾,这不起作用,请参阅以下错误:

【问题讨论】:

    标签: reactjs typescript react-native mobile


    【解决方案1】:

    我是这样用的。

    const renderItem = useCallback(({item, index}) => {
        return(<Card 
                start_sitation={item.start_sitation} 
                end_sitation={item.end_sitation} 
                start_time={item.start_time}
                end_time={item.end_time}
                />);
    }, []);
    
       <FlatList 
            data={state.currentJourney}
            renderItem={renderItem}
            style={styles.list}
            keyExtractor={keyExtractor}
        />
    

    【讨论】:

    • 我明白了...但是 keyExtractor 函数在哪里?
    • const keyExtractor = (item, index) => 'key : ' + index;
    • 密钥提取器可以像上面那样。您可以定义您想要的位置,但它会返回一个唯一的字符串
    • 但是返回item的索引不会导致性能问题?
    • 如果你的物品有唯一的 id,你不能使用 index.您可以以 item.id.toString() 为例。
    猜你喜欢
    • 1970-01-01
    • 2021-02-07
    • 1970-01-01
    • 2021-03-03
    • 1970-01-01
    • 2016-06-16
    • 2017-09-01
    • 2012-05-29
    • 2017-04-30
    相关资源
    最近更新 更多