Получение Promise в качестве возвращаемого значения внутри FlatList React-native - PullRequest
Новая
       13

Получение Promise в качестве возвращаемого значения внутри FlatList React-native

1 голос
/ 09 мая 2019

Отображение значений с использованиемact-native FlatList подобно: 

<FlatList 
          data={this.state.oldLocations}
          showsVerticalScrollIndicator={false}
          keyExtractor={item => item.id}
          renderItem={({item,index}) =>
        <View key={index} style={styles.flatview}>
            <GoogleStaticMap
                latitude={item.latitude.toString()}
                longitude={item.longitude.toString()}
                zoom={13}
                size={{ width: 450 , height: 250 }}
                apiKey={'MY_API_KEY'}
            />

            <Text style={styles.name}>{item.id}</Text>
            <Text style={styles.email}>{item.latitude}</Text>
            <Text style={styles.email}>{item.longitude}</Text>
            {<Text style={styles.email}>{this.getAddress(item.latitude, item.longitude)})}</Text>}
          </View>

        }


        />

моя функция getAddress внутри обещания возврата FlatList. Как я могу показать возвращаемые значения? мой Func: 

getAddress(lat, lng){

 return Geocoder.geocodePosition({lat: lat, lng: lng}).then(res => {
      // res is an Array of geocoding object (see below)
      console.log(res);
      return res[0].formattedAddress;
  })
  .catch(err => console.log(err))


}

1 Ответ

2 голосов
/ 09 мая 2019

Асинхронные вызовы не могут быть возвращены и обработаны как часть вашего рендера.Вместо этого вам нужно выполнить асинхронную загрузку вне рендера, а затем установить полученные данные в состояние для рендеринга.

В вашем случае вам потребуется компонент с состоянием, который вы использовали для каждого элемента вваш FlatList.Этот компонент будет обрабатывать загрузку и отображать результат после его загрузки.

Например: 

class MapListItem extends React.Component {
  state = {
    address: '',
  }

  componentDidMount() {
    const {
      item,
    } = this.props;

    this.getAddress(item.latitude, item.longitude);
  }

  getAddress = (lat, lng) => {
    Geocoder.geocodePosition({lat: lat, lng: lng}).then(res => {
      this.setState({
        address: res[0].formattedAddress,
      });
    });
  }

  render() {
    return (
      // All your map/details - the other parts of your current renderItem
      ...
      <Text>{this.state.address}</Text>
      ...
    )
  }
}

И тогда ваш FlatList renderItem становится: 

renderItem={({ item, index }) => (
   <MapListItem item={item} index={index} />
)}
...