相同的代码在视图地图中渲染，但不在 FlatList 中

Question

这里是 React Native 初学者。在开发教程应用程序时，我无法让 FlatList 显示我的数据项。因此，我创建了一个屏幕，它将在 FlatList 和 View-Map 组合中呈现来自对象数组（此处使用的扑克牌）的数据项。现在，列表在 View-Map 中完美呈现，但在 FlatList 中根本不呈现。也不会出现错误或警告。谁能指出这里可能有什么错误。我已经努力让它工作好几天了。

import { View, Text, FlatList, Button, SafeAreaView } from "react-native";
import { React, useState } from "react";
import {
  hearts,
  spades,
  clubs,
  diamonds,
  suites,
} from "../../assets/data/cards";

const FlatListVsMap = () => {
  const [cards, setCards] = useState(hearts);
  //console.log("Cards Initially: " + cards);
  const flatlist = false;
  return (
    <SafeAreaView>
     //Option 1: Using a Flatlist when 'flatlist' true
      {flatlist && cards && (
        <FlatList
          data={cards}
          extraData={cards}
          keyExtractor={(card) => card.id}
          renderItem={(card) => {
            <View className="h-10">
              <Text key="index">{`Card: ${card.name}, Id: ${card.id}`}</Text>
            </View>;
          }}
          ListHeaderComponent={
            <View className="flex-row justify-between px-2 mt-5 border">
              <Button title={"Hearts"} />
              <Button title={"Spades"} />
              <Button title={"Clubs"} />
              <Button title={"Diamonds"} />
            </View>
          }
        />
      )}
      //Option 2: Using a View-Map when 'flatlist' false
      {!flatlist && cards && (
        <View>
          <View className="flex-row justify-between px-2 mt-5 border">
            <Button title={"Hearts"} />
            <Button title={"Spades"} />
            <Button title={"Clubs"} />
            <Button title={"Diamonds"} />
          </View>
          <View className="mt-5 bg-slate-400">
            {cards.map((card, index) => (
              <View className="h-10" key={index}>
                <Text>{`Card: ${card.name}, Id: ${card.id}`}</Text>
              </View>
            ))}
          </View>
        </View>
      )}
    </SafeAreaView>
  );
};

export default FlatListVsMap;

Answer 1

将 Flatlist renderItem 更新为此代码

renderItem={({item:card}) => {
  return(
    <View className="h-10">
      <Text key="index">{`Card: ${card.name}, Id: ${card.id}`}</Text>
    </View>
  )
}