React Native Flatlist 错误没有重载匹配此调用答案

【问题标题】：React Native Flatlist error no overload matches this callReact Native Flatlist 错误没有重载匹配此调用
【发布时间】：2021-11-03 06:11:28
【问题描述】：

我正在使用 Typescript 做一个 React Native 应用程序，但我在使用 Flatlist renderItem 时遇到了错误。我是 Typescript 和 React Native 的新手。错误说：

没有重载匹配这个调用。重载 1 of 2，'(props: FlatListProps | Readonly): FlatList<...>'，给出了以下错误。类型 '({ item }: { item: arrayPlasticsData; }) => void' 不可分配给类型 'ListRenderItem'。类型 'void' 不可分配给类型 'ReactElement |空值'。 Overload 2 of 2, '(props: FlatListProps, context: any): FlatList'，给出了以下错误。类型 '({ item }: { item: arrayPlasticsData; }) => void' 不可分配给类型 'ListRenderItem'。

我正在尝试渲染一个包含项目列表的平面列表，但它基本上不允许我在那里渲染任何东西。我也尝试在 renderItem 上放一些类似Something的东西，但它也不起作用。 PlasticTypesComponent.ts 带来了一个包含数据的数组。这是代码：

import { FlatList, StyleSheet, Text, View } from "react-native";
import PlasticTypesComponent, { arrayPlasticsData } from "../../components/data/PlasticTypes";

import PlasticItemComponent from "../../components/plasticItem/plasticItem";
import React from "react";

interface plasticsScreenComponentProps {
    route: any
    navigation: any
    renderItem: any
}
 
const plasticsScreenComponent: React.FC<plasticsScreenComponentProps> = ({ navigation, route }) => {
    const plasticTypes = PlasticTypesComponent.filter(plastic => plastic.category === route.params.categoryID);
    console.log('plasticTypes', plasticTypes)

    const handleSelected = (item: { id: string; title: string; }) => {
        navigation.navigate('Plastic description', {
            productID: item.id,
            name: item.title,
        });
    };
    const renderItemPlastic = ({item}: {item: arrayPlasticsData}) => {
        <PlasticItemComponent item={item} onSelected={handleSelected} />
//// here is where I tried to replace <PlasticItemCompoenent/> with <Text>Something</Text> but didn't work either
    };
    return (
        <>
            <View style={styles.container}>
                <Text style={styles.text}>plastics</Text>
                <FlatList 
                data={plasticTypes}
                keyExtractor={item => item.id}
                renderItem={renderItemPlastic} />
            </View>            
        </>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignContent: 'center',
        justifyContent: 'center',
    },
    text: {
        fontSize: 23,
        textAlign: 'center',
    },
});
export default plasticsScreenComponent;

也许是我做错了什么打字稿。几天没找到解决办法。如果有人可以帮助我，那就太好了。提前致谢。

【问题讨论】：

标签： reactjs typescript react-native react-navigation react-native-flatlist

【解决方案1】：

您必须从您的 renderItemPlastic 函数中返回您的 JSX。只需将您的 renderItemPlastic 函数更改为

const renderItemPlastic = ({item}: {item: arrayPlasticsData}) => {
    return <PlasticItemComponent item={item} onSelected={handleSelected} />
};

或者干脆

const renderItemPlastic = ({item}: {item: arrayPlasticsData}) => 
    <PlasticItemComponent item={item} onSelected={handleSelected} />;

【讨论】：