Flatlist не отображает элементы (React Native)

Привет, ребята, у меня есть эти данные

{
    "data": {
        "image": [
            {
                "item_image": "Sample Data"
            },
            {
                "item_image": "Sample Data 2"
            }
        ],
        "data": [
            {
                "id": 5,
                "promotion_categoryname": "Cheese Burger Delight",
                "promotion_categoryname_id": 23,
                "promotion_name": "test",
                "promotion_price": 123,
                "promotion_description": "test",
                "promotion_from_date": "2022-03-29",
                "promotion_to_date": "2022-03-31",
                "verified": 0
            },
            {
                "id": 6,
                "promotion_categoryname": "Sample Beverage",
                "promotion_categoryname_id": 25,
                "promotion_name": "Test",
                "promotion_price": 123,
                "promotion_description": "test",
                "promotion_from_date": "2022-03-29",
                "promotion_to_date": "2022-03-31",
                "verified": 0
            }
        ]
    }
}

Теперь в моем плоском списке и настройке данных

setPromotionData(responseJson.data);

if (promotionData.data.length > 0)
        {
            return (
                <FlatList
                    data = {promotionData}
                    renderItem = {({item}) => (
                        <View style = {{flex:1}}>
                            <View style = {{flexDirection:'row'}}>
                                <Image 
                                source = {{uri: 'data:image/jpeg;base64,'+ item.image.item_image}}
                                resizeMode='contain'
                                style = {{
                                    width:80,
                                    height:80,
                                }}/>
                                <View style = {{flexDirection:'column'}}>
                                    <Text style = {{fontSize:20, fontWeight:'bold'}}> {item.data.promotion_categoryname}</Text>
                                    <Text style = {{fontSize:18, color:'gray'}}> Php {item.data.promotion_price}.00</Text>
                                    <TouchableOpacity onPress = {() => DeleteItem(item.data.promotion_categoryname_id)}>
                                        <Text style = {{fontSize:18, color:'red'}}> Delete</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                            <View style = {{flex: 1, height: 1, backgroundColor: 'black', marginBottom:15, marginTop:15}} />
                        </View>
                    )} 
                    keyExtractor = {item => item.data.id}
                />
            )
        }
        else
        {
            return (
                <View style = {{flexDirection:'row', alignItems:'center', marginLeft: 20, marginRight: 20}}>
                    <View style = {{flex: 1, height: 1, backgroundColor: 'black'}} />
                    <View>
                        <Text style = {{width: 100, textAlign: 'center'}}>No Data</Text>
                    </View>
                    <View style = {{flex: 1, height: 1, backgroundColor: 'black'}} />
                </View>
            );
        }
   }

Теперь проблема в том, что я не знаю, почему он не отображает или не отображает данные, но когда я console.info() у него есть данные, такие же, как данные выше.

ПРИМЕЧАНИЕ. В консоли нет предупреждений или ошибок.

1
0
34
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Элементы для FlatList содержатся в promotionData.data, но вы передаете promotionData, который содержит только объект data, в data опору FlatList. Вместо этого передайте массив и получите доступ к массиву image через индекс функции renderItem.

<FlatList
                    data = {promotionData.data}
                    renderItem = {({item, index}) => (
                        <View style = {{flex:1}}>
                            <View style = {{flexDirection:'row'}}>
                                <Image 
                                source = {{uri: 'data:image/jpeg;base64,'+ promotionData.image[index].item_image}}
                                resizeMode='contain'
                                style = {{
                                    width:80,
                                    height:80,
                                }}/>
                                <View style = {{flexDirection:'column'}}>
                                    <Text style = {{fontSize:20, fontWeight:'bold'}}> {item.promotion_categoryname}</Text>
                                    <Text style = {{fontSize:18, color:'gray'}}> Php {item.promotion_price}.00</Text>
                                    <TouchableOpacity onPress = {() => DeleteItem(item.promotion_categoryname_id)}>
                                        <Text style = {{fontSize:18, color:'red'}}> Delete</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                            <View style = {{flex: 1, height: 1, backgroundColor: 'black', marginBottom:15, marginTop:15}} />
                        </View>
                    )} 
                    keyExtractor = {item => item.id}
                />

Почему я вместо этого подумал о передаче массива. Спасибо . Хотя я нашел способ, используя 2 плоских списка, но этот лучше. Спасибо, добрый сэр.

Ginxxx 29.03.2022 12:51

Добро пожаловать! Я рад, что это сработало для вас.

David Scholz 29.03.2022 12:57

Другие вопросы по теме