React Native Flatlist 错误没有重载匹配此调用
React Native Flatlist error no overload matches this call
我正在使用 Typescript 开发 React Native 应用程序,但 Flatlist renderItem 出现错误。我是 Typescript 和 React Native 的新手。错误说:
No overload matches this call. Overload 1 of 2, '(props:
FlatListProps |
Readonly<FlatListProps>): FlatList<...>', gave the
following error.
Type '({ item }: { item: arrayPlasticsData; }) => void' is not assignable to type 'ListRenderItem'.
Type 'void' is not assignable to type 'ReactElement<any, string | JSXElementConstructor> | null'. Overload 2 of 2, '(props:
FlatListProps, context: any):
FlatList', gave the following error.
Type '({ item }: { item: arrayPlasticsData; }) => void' is not assignable to type '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;
也许是我做错了 Typescript。几天没找到解决办法。如果有人可以帮助我,那就太好了。提前致谢。
您必须从 renderItemPlastic
函数中 return 您的 JSX
。只需将 renderItemPlastic
函数更改为
const renderItemPlastic = ({item}: {item: arrayPlasticsData}) => {
return <PlasticItemComponent item={item} onSelected={handleSelected} />
};
或者干脆
const renderItemPlastic = ({item}: {item: arrayPlasticsData}) =>
<PlasticItemComponent item={item} onSelected={handleSelected} />;
我正在使用 Typescript 开发 React Native 应用程序,但 Flatlist renderItem 出现错误。我是 Typescript 和 React Native 的新手。错误说:
No overload matches this call. Overload 1 of 2, '(props: FlatListProps | Readonly<FlatListProps>): FlatList<...>', gave the following error. Type '({ item }: { item: arrayPlasticsData; }) => void' is not assignable to type 'ListRenderItem'. Type 'void' is not assignable to type 'ReactElement<any, string | JSXElementConstructor> | null'. Overload 2 of 2, '(props: FlatListProps, context: any): FlatList', gave the following error. Type '({ item }: { item: arrayPlasticsData; }) => void' is not assignable to type '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;
也许是我做错了 Typescript。几天没找到解决办法。如果有人可以帮助我,那就太好了。提前致谢。
您必须从 renderItemPlastic
函数中 return 您的 JSX
。只需将 renderItemPlastic
函数更改为
const renderItemPlastic = ({item}: {item: arrayPlasticsData}) => {
return <PlasticItemComponent item={item} onSelected={handleSelected} />
};
或者干脆
const renderItemPlastic = ({item}: {item: arrayPlasticsData}) =>
<PlasticItemComponent item={item} onSelected={handleSelected} />;