#react-native #fetch #response
#react-native #выборка #ответ
Вопрос:
Я создаю простое приложение для управления галереей с помощью React Native. На странице галереи я вызвал функцию «FetchGallery», и там я получил некоторый ответ.
Это часть конструктора.
this.state = {
mainGalleryData: [
{
bg_url: '',
country_id: 0
}
],
};
Это код для ответа.
_onFetchGalleryBySite = (e) => {
fetch(config.api.getGalleryInfo '/' e, {
method: 'GET',
headers: this.state.myHeaders
})
.then((response) => response.json())
.then((responseJSON) => {
console.log('resJSON=>', responseJSON['gallery_list']); // => log is in the below.
responseJSON['gallery_list'].map(item => {
if (item != "") {
let obj = {}
obj.bg_url = item.bg_url
obj.country_id = item.country_id
this.state.mainGalleryData.push(obj)
}
})
})
.catch(err => console.log('_onFetchGalleryInfoErr=>', err))
}
Это журнал извлеченных данных
resJSON => [{ "bg_url": "staff_upload/bgremoval_20201008030228.png", "country_id": "3" },
{ "bg_url":"Guest/1/image/bgremoval_20201004222851.png", "country_id": "3" }]
И в render() я использовал эти данные в FlatList
Это код для FlatList
<FlatList
data={mainGalleryData}
renderItem={this.renderGallery}
keyExtractor={(item, index) => index.toString()}
/>
Это галерея визуализации.
renderGallery = (item) => (
<TouchableOpacity onPress={() => console.log('itemClicked=>', item)} style={styles.overlay}>
<Image source={newImg} style={styles.newImg} />
{
this.state.gallery_id == item.location_id ?
<Text style={{ fontWeight: '700' }} numberOfLines={1}>{item.item.title}</Text>
:
<Text style={{ fontSize: 12 }} numberOfLines={1}>{item.item.title}</Text>
}
</TouchableOpacity>
)
Когда я нажимаю на одну из этих данных, я хочу получить эти данные. Но результат отличается от того, что я ожидаю.
I want: { "bg_url": "staff_upload/bgremoval_20201008030228.png", "country_id": "3" }
result: { "index": 2, "item": {"Guest/1/image/bgremoval_20201004222851.png", "country_id": "3"}}
Поэтому мне пришлось получить country_id с помощью «item.item.country_id».
Я хочу получить country_id с помощью «item.country_id».
Что это за <«index»: 2> ?
Ответ №1:
Перед отправкой ответа в состояние, пожалуйста, очистите «mainGalleryData []», потому что по умолчанию в состоянии находится 1 элемент, что делает индекс неуместным.
Сделайте это
console.log('resJSON=>', responseJSON['gallery_list']);
const responseData = responseJSON['gallery_list'];
const data = this.state.mainGalleryData.concat(responseData); <-- add this line -->
this.state({ mainGalleryData: data });
Комментарии:
1. Спасибо за ваш четкий ответ. Тогда на самом деле мне нужно начальное значение mainGalleryData[] в качестве первого элемента этого массива. Есть ли какой-либо другой способ исправить эту проблему, сохранив начальное значение массива?
2. Почему вам нужно сохранить начальный элемент массива, пока его значения по умолчанию пусты, что влияет на результат, когда вы нажимаете на элемент, и он выдает вам следующий элемент.
3. Данные, поступающие с сервера, имеют тип «1,2,3,4,5, …». Но мне нужен «0,1,2,3,4,5, …» этого типа. Вот почему я установил начальное значение как пустое. Тогда, кроме этого способа, есть ли другой хороший способ? Как установить первое значение массива пустым?
4. Я обновил свой ответ, таким образом, у вас может быть строка данных 0,1,2 … 5