React Native FlatList error: No overload matches this call. Type is missing the following properties

Question

我是 React Native 的新手，正在尝试构建一个简单的聊天室应用程序。我想创建一个列表，其中包含代表可用聊天室的元素，但我终究无法弄清楚为什么 FlatList 一直给我这个错误。我给了 FlatList 一个 data 道具和一个 renderItem 道具。我尝试将 renderItem 道具更改为未引用 const ChatRoom 的简单内容，但没有任何区别。

"No overload matches this call.
Overload 1 of 2, '(props: FlatListProps<unknown> | Readonly<FlatListProps<unknown>>): FlatList<unknown>', gave the following error.
Type '{ children: (string | { name: string; description: string; }[] | (({ item }: { item: any; }) => Element))[]; }' is missing the following properties from type 'Readonly<FlatListProps<unknown>>': data, renderItem\n  Overload 2 of 2, '(props: FlatListProps<unknown>, context: any): FlatList<unknown>', gave the following error.
Type '{ children: (string | { name: string; description: string; }[] | (({ item }: { item: any; }) => Element))[]; }' is missing the following properties from type 'Readonly<FlatListProps<unknown>>': data, renderItem",
    "source": "ts",
    "startLineNumber": 18,
    "startColumn": 6,
    "endLineNumber": 18,
    "endColumn": 14

const RoomSelectionScreen = props => {
  const rooms = [
    { name: "Room num 1", description: "First room" },
    { name: "Room num 2", description: "Second room" },
    { name: "Room num 3", description: "Third room" }
  ];

  const Item = ({ item }) => {
    return <ChatRoom name={item.name}s description={item.description} />;
  };

  return <View>
    <Text style={styles.text}>Room Selection</Text>
    <FlatList>
      data={rooms}
      renderItem={Item}
    </FlatList>
  </View>;
};

const styles = StyleSheet.create({
  text: {
    fontSize: 30
  }
});

export default RoomSelectionScreen;

const ChatRoom = props => {
    return <View>
        <Text style={styles.roomName}>{props.name}</Text>
        <Text style={styles.roomDescription}>{props.description}</Text>
        <Button
            title="Go to room"
            onPress={() => openChatRoom()}
        />
    </View>;
};

function openChatRoom() {

}

const styles = StyleSheet.create({
    roomName: {
        fontSize: 30
    },
    roomDescription: {
        fontSize: 15
    }
});

export default ChatRoom;

Answer 1

当你这样做时，你目前是运行 FlatList FlatList

<FlatList>
   data={rooms}
   renderItem={Item}
</FlatList>

解法：

  <FlatList
      data={rooms}
      renderItem={Item}
  />

或

<FlatList
  data={rooms}
  renderItem={Item}>
</FlatList>

React Native FlatList error: No overload matches this call. Type is missing the following properties

React Native FlatList error: No overload matches this call. Type is missing the following properties

javascript

typescript

react-native

flatlist