Flatlist 渲染空白空间

Question

我是新来的反应原生并试图在另一个由另一个平面列表呈现的组件中使用平面列表。

我担心这样使用的嵌套平面列表：

卡片组件

import React, { useContext } from "react"
import { View, Image, Text, StyleSheet, FlatList } from "react-native";
import { QueryContext } from "../context/QueryContext"

function Card(props) {

    const [query, setQuery] = useContext(QueryContext)
    const { genres_list } = query

    const { posterURLs, originalTitle, genres } = props

    const listData = []

    genres.forEach(genre => {
        listData.push({ key: genres_list[genre] })
    })

    const renderItem = (item) => {

        return (
            <View>
                <Text style={styles.item}>
                    {item.index}
                    {item.key}
                </Text>
            </View>
        )
    }
    return (
        <View style={styles.container}>
            <Image
                style={styles.images}
                source={{ uri: posterURLs["original"] }} />

            <Text style={styles.title}>{originalTitle}</Text>
            <FlatList
                data={listData}
                renderItem={renderItem}
                keyExtractor={(item)=> item.key}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    images: {
        width: 400,
        height: 500
    },
    container: {
        flex: 1,    
        backgroundColor: 'lightgrey',
        justifyContent: 'center',
        alignItems: 'center',
    },
    title: {
        fontSize: 30
    },
    item: {
        padding: 10,
        fontSize: 15,
        color: "red",
        
    },
})

我必须为平面列表准备数据，因为它位于来自上下文的对象内。奇怪的是，我可以从item.index 看到索引，但看不到item.key

卡片组件由另一个平面列表呈现，我不知道这是否重要。

提前致谢

Answer 1

没有显示任何内容，因为数据 item.key 值实际上存储在 item.item.key 中