FlatList React Native 上没有重载匹配

Question

我正在使用 React Native 处理我的 <FlatList>。

我有 ff flatlist 代码：

<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>
            }

然后在我的 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>
  );

我的打字稿代码在我的 FlatList 声明中突出显示了 renderItem 这个词，它说：

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.

我有 ff 状态：

this.state = {
  totalCount: 0,
  readingCount: 0,
  doneCount: 0,
  isAddNewBookVisible: false,
  textInputData: '',
  books: [],
};

如何解决高亮错误？

Answer 1

使用

({item, index}) => this.renderItem(item, index)
    

如果您想参考下面的示例，请为传递给 Flatlist 的数据提供类型

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)}
      />
    );
  }
}