Estoy trabajando en mi <FlatList> en React Native.
Tengo el código de lista plana ff:
<FlatList data={this.state.books} keyExtractor={(item, index) => index.toString()} renderItem={({item}: {item: any}, index: number) => this.renderItem(item, index) } ListEmptyComponent={ <View style={styles.listEmpty}> <Text style={styles.emptyText}>Not Reading any books</Text> </View> }Y luego dentro de mi función renderItem:
renderItem = (item: string, index: number) => ( <View style={styles.renderContainer}> <View style={{flex: 1, justifyContent: 'center', paddingLeft: 10}}> <Text>{item}</Text> </View> <TouchableOpacity onPress={() => console.log('hello')}> <View style={styles.btnMarkRead}> <Text style={{fontWeight: 'bold', color: 'black'}}>Mark as Read</Text> </View> </TouchableOpacity> </View> ); Mi código mecanografiado resalta la palabra renderItem en mi declaración de FlatList y dice:
No overload matches this call. Overload 1 of 2, '(props: FlatListProps<String> | Readonly<FlatListProps<String>>): FlatList<String>', gave the following error. Type '({ item }: { item: any; }, index: number) => JSX.Element' is not assignable to type 'ListRenderItem<String>'. Overload 2 of 2, '(props: FlatListProps<String>, context: any): FlatList<String>', gave the following error.Tengo el estado ff:
this.state = { totalCount: 0, readingCount: 0, doneCount: 0, isAddNewBookVisible: false, textInputData: '', books: [], };¿Qué debo hacer para corregir el error de resaltado?
usar
({item, index}) => this.renderItem(item, index)y proporcione el tipo de datos pasados a Flatlist si desea consultar el ejemplo a continuación
import React from 'react'; import {FlatList, View} from 'react-native'; interface PropsInterface {} interface StateInterface { books?: any[]; } class ComponentName extends React.Component<PropsInterface, StateInterface> { constructor(props: PropsInterface) { super(props); this.state = { books: [], }; } renderItem = (item: any, index: number) => { return <View></View>; }; render() { return ( <FlatList data={this.state.books} renderItem={({item, index}) => this.renderItem(item, index)} /> ); } }