[React Native] FlatList의 keyExtractor 에러

 

ScrollView 대신에 FlatList 사용하기!

return (
    <ScrollView
      showsVerticalScrollIndicator={false}
      // contentContainerStyle={{ paddingBottom: bottomSpace }}
    >
      {props.data.map((item, index) => (
        // key는 최상단에!
        <View key={index}>
          <Profile
            uri={item.uri}
            name={item.name}
            introduction={item.introduction}
          />
          <Margin height={13} />
        </View>
      ))}
    </ScrollView>
  );

이 부분을 FlatList를 사용해 구현하는데 FlatList에서는 keyExtractor로 키를 지정할 수 있다.

그래서 ↓ 다음과 같이 작성했는데 keyExtractor부분에 에러가 발생함..

  return (
    <View style={styles.container}>
      <FlatList
        data={friendProfiles}
        keyExtractor={(_, index) => index}
        ItemSeparatorComponent={ItemSeparatorComponent}
        renderItem={renderItem}
      />
    </View>
  );

이 호출과 일치하는 오버로드가 없습니다.
오버로드 1/2('(props: FlatListProps<{ uri: string; name: string; introduction: string; }>): FlatList<{ uri: string; name: string; introduction: string; }>')에서 다음 오류가 발생했습니다.
'(_: { uri: string; name: string; introduction: string; }, index: number) => number' 형식은 '(item: { uri: string; name: string; introduction: string; }, index: number) => string' 형식에 할당할 수 없습니다.
'number' 형식은 'string' 형식에 할당할 수 없습니다.
오버로드 2/2('(props: FlatListProps<{ uri: string; name: string; introduction: string; }>, context: any): FlatList<{ uri: string; name: string; introduction: string; }>')에서 다음 오류가 발생했습니다.
'(_: { uri: string; name: string; introduction: string; }, index: number) => number' 형식은 '(item: { uri: string; name: string; introduction: string; }, index:

 

keyExtractor는 string 형식으로 받아야하는데 index는 숫자이기 때문에 number 형식은 string에 할당 할 수 없다고 뜬다.

keyExtractor={(_, index) => index.toString()}

 

그래서 index에 toString()을 사용해 문자열로 바꿔주니 에러가 사라졌다!