React Native FlatList 错误：没有重载匹配此调用。类型缺少以下属性答案

【问题标题】：React Native FlatList error: No overload matches this call. Type is missing the following propertiesReact Native FlatList 错误：没有重载匹配此调用。类型缺少以下属性
【发布时间】：2021-06-20 23:59:39
【问题描述】：

我是 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;

【问题讨论】：

标签： javascript typescript react-native flatlist

【解决方案1】：

当您执行此操作时，您当前正在运行 FlatList 而没有它的道具

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

解决方案：

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

或

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

【讨论】：