Question

我正在尝试从经度和纬度获取地址。这是我到目前为止的内容：

 getAddress(lat, long){
    let apiKey = 'myKey'
    fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${lat},${long}&key=${apiKey}`)
    .then((response) => response.json())
    .then((responseJson) => {
        const address = responseJson.results[0].formatted_address;
        return address;
    });   
  }

我得到了正确的地址，但是当我想显示它时，它不起作用：

renderItem = ({ item }) => (
     <View>
        <Text style={styles.address}>{this.getAddress(item.user.latitude, item.user.longitude)}</Text>
     </View>
  )

我做错了什么？

Answer 1

您可以回调异步响应并使用它。

getAddress(lat, long, callback){
    let apiKey = 'myKey'
    fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${lat},${long}&key=${apiKey}`)
    .then((response) => response.json())
    .then((responseJson) => {
        const address = responseJson.results[0].formatted_address;
        callback(address);
    });   
  }

renderItem = ({ item }) => (
<View>
 {
  this.getAddress(item.user.latitude, item.user.longitude, (value)=><Text
  style={styles.address}
  >{value}</Text>)
 }
</View>
)

Answer 2

使用状态更改，

componentWillMount(){
this.getAddress(lat,long);
}

getAddress(lat, long){
    let apiKey = 'myKey'
    fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${lat},${long}&key=${apiKey}`)
    .then((response) => response.json())
    .then((responseJson) => {
        const address = responseJson.results[0].formatted_address;
        this.setState({address})
    });   
  }


renderItem = ({ item }) => (
     <View>
        {this.state.address ? 
              this.state.address.map(singleAddress => 
                  <Text style={styles.address}>{singleAddress}</Text>) 
                : <Text>Loading Data</Text>
        }
     </View>
  )

最初this.state.address将为空，因此不会显示任何内容，但是一旦您从获取中获取值，它将更新状态，并且一旦状态改变，它将重新呈现并显示正确的数据。

您将在屏幕上查看以下结果

这是“地址”的结果

游戏地：

class App extends React.Component {
  state = {
    address: 'default address, please add API KEY'
  }

  componentWillMount() {
    this.getAddress(40.341, -109.231); //PUT YOUR LOCATION CO-ORDINATES
  }

  //
  getAddress(lat, long) {
    let apiKey = 'myKey' //Make Sure to add your API KEY
    fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${lat},${long}&key=${apiKey}`)
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson.results[0].formatted_address)
        const address = responseJson.results[0].formatted_address;
        this.setState({
          address
        });
      });
  }
  render() {
    return <p > {
      this.state.address
    } < /p>
  }
}

ReactDOM.render( < App / > , document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 3

fetch是一个异步调用，它返回一个Promise。这就是为什么使用Promise的then子句从响应中获取价值的原因。但是，函数getAddress不会返回诺言。实际上，它返回undefined。

return子句中的then关键字仅返回要由新Promise包装的新值。

要使其正常工作，您需要从函数中返回promise：

return fetch(...)

然后要使用返回的值，则可以再次使用then子句，因为这是异步的。因此，实际上renderItem也变得异步了：

renderItem = ({ item }) => {
    return this.getAddress(item.user.latitude, item.user.longitude)
      .then(address => (
        <View>
          <Text style={styles.address}>{address}</Text>
        </View>
      ));

来自本地的反应本地获取地址不显示

3 个答案: