Question

使用react-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中返回诺言。如何显示返回值？我的功能：

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))


}

Answer 1

异步调用无法返回并呈现为渲染的一部分。相反，您需要在渲染外部执行异步加载，然后将检索到的数据设置为渲染状态。

在您的情况下，您将需要有一个用于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} />
)}

在FlatList React-native中获取Promise作为返回值

1 个答案: