Блог

Я создаю простое приложение для управления галереей с помощью 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> ?

Перед отправкой ответа в состояние, пожалуйста, очистите «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 });