Привет, ребята, у меня есть эти данные
{
"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() у него есть данные, такие же, как данные выше.
ПРИМЕЧАНИЕ. В консоли нет предупреждений или ошибок.
Элементы для 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 плоских списка, но этот лучше. Спасибо, добрый сэр.