Question

我很反应，我需要将经纬度转换为经纬度得到的纬度和经度。所以问题是我能够控制登录地址。但是，我无法显示

这是我的建议者

this.getAddressFromLatLong = this.getAddressFromLatLong.bind(this)

这是我为转换而写的函数

getAddressFromLatLong(lat, long) 
{ Geocode.fromLatLng(lat, long).then( 
    response => { 
        const address = response.results[0].formatted_address; 
        console.log(address); 
        return address; 
    }, 
    error => { console.error(error); } 
)}

这是我渲染地址的地方

return ( 
    <tr key={atData.uid}> 
        <td>{atData.uid}</td> 
        <td>{atData.user}</td> 
        <td><TimeStamp time={atData.dateTime} format='full' /></td> 
        <td>{this.getAddressFromLatLong(atData.latitude, atData.longtitude)}</td> 
    </tr> 
)

请告知＆gt;。＆lt;

编辑：

我意识到我发布的代码还不够，所以这里有关于我的问题和我想要的最终产品的更多信息

所以我有这个页面，当用户从下拉列表中选择一个来自firebase的锁时，显示所有地址和用户

这就是我输入下拉列表的方式

componentWillMount() {
    const lockSelected = this.state.selectedLock
    console.log(lockSelected)
    // Calling the Lock List
    axios
        .get(process.env.REACT_APP_FIREBASE_DATABASE + '/' + doGetLocklist() + '.json?auth=' + process.env.REACT_APP_FIREBASE_DATABASE_SECRET)
        .then((response) => {
            // console.log("=== componentDidMount: axios - Lock List ===")
            this.setState({ locklistArray: response.data, loading: false })
        })
        .catch((err) => { })
}
renderDropdown() {
    return _.map(this.state.locklistArray, lockData => {
        return (
            <option value={lockData.uid}>{lockData.lockName}</option>
        )
    })
}

这就是我渲染下拉列表的方式

<FormControl componentClass="select" placeholder="select" onChange={this.detectOnChangeEvent}>
    <option value="">- Please Select a lock -</option>
    {this.renderDropdown()}
</FormControl>

之后，当用户选择了一个锁时，它将运行这个detectOnChange func，以便它将使用锁定数据重新呈现表

detectOnChangeEvent(event) {
    this.setState({
        selectedLock: event.target.value,
    })
    this.fetchSelectedATData(event.target.value)
    this.forceUpdateHandler()
}

forceUpdateHandler() {
    this.forceUpdate();
};

fetchSelectedATData(atlist) {
    var lockSelected = atlist
    axios
        .get(process.env.REACT_APP_FIREBASE_DATABASE + '/' + doGetAuditTrailList() + '/' + lockSelected + '.json?auth=' + process.env.REACT_APP_FIREBASE_DATABASE_SECRET)
        .then((response) => {
            // console.log("=== componentDidMount: axios - User List ===")
            console.log(response.data)
            this.setState({ atArray: response.data, loading: false })
        })
        .catch((err) => { })

    this.renderATlistArray()
}

renderATlistArray() {
    if (this.state.loading) {
        return (<Loading />)
    } else {
        return _.map(this.state.atArray, atData => {
            return (
                <tr key={atData.uid}>
                    <td>{atData.uid}</td>
                    <td>{atData.user}</td>
                    <td><TimeStamp time={atData.dateTime} format='full' /></td>
                    <td>{this.getAddressFromLatLong(atData.latitude, atData.longtitude)}</td>
                </tr>
            )
        })
    }
}

所以现在，一切正常。我知道这也不是正确的做事方式。只是当我能够控制日志并且它得到正确的地址时，我无法显示在我的桌面上。

Here's a screenshot of the response

希望通过所有这些附加信息，您可以更好地理解代码！

Answer 1

您发布的代码存在一些问题

如上所述，getAddressFromLatLong()没有有用的返回值。它返回undefined，因为它是使用methodName() {}语法编写的，没有返回语句。

以下是如何重写它以便它返回一个值：

getAddressFromLatLong (lat, long) { 
  return Geocode.fromLatLng(lat, long).then( 
    response => { 
      const address = response.results[0].formatted_address; 
      console.log(address); 
      return address; 
    }, 
    error => { console.error(error); } 
  )
}

getAddressFromLatLong()调用异步函数，返回Promise。异步函数不会立即生成一个值 - 相反，我们提供一个回调，当异步函数最终生成一个值时，它最终被调用（在未来的某个未知点）。 / p>
回调只是一个普通的ol函数，可以在将来某个时候调用，并带有异步操作的结果。

Promise 是一种表示异步操作并注册回调的方法，具体取决于操作是成功还是失败。

.then()函数允许我们注册那些成功和失败处理程序。如果操作成功，则调用传递给.then()的第一个函数。如果操作失败，则调用第二个函数。

还有其他方法可以在Promises上注册处理程序：查看完整API的MDN Docs。

为了使这段代码有效，我们需要启动异步操作，然后在数据可用后渲染组件。

有很多方法可以解决这个问题，但最简单的方法是将操作结果存储在组件的状态。

这是重写此组件的一种方法，以便在可用时呈现异步检索的数据：

class YourComponent extends React.Component {
  // This function gets called the first time the component is added to the DOM.
  // If the latitude or longitude changes, you'll need to call this function from the componentDidUpdate() lifecycle method.
  componentDidMount () {
    // Obtain atData, probably from props
    const atData = this.props.atData
    getAddressFromLatLong(atData.latitude, atData.longitude)

      // Update the component state with the address
      // setState() will trigger a re-render
      .then(
        address => this.setState({ address: address }),

        // If the Geocode() call fails, this function gets called.
        // As written, this component will continue to show a loading message if Geocode() fails, which isn't great UX.
        // You may want to add the error message to the state and display an error if the Geocode() fails.
        error => console.log('Error retrieving address', error)
      )
  }

  getAddressFromLatLong (lat, long) { 
    return Geocode.fromLatLng(lat, long).then( 
      response => { 
        const address = response.results[0].formatted_address;
        return address; 
      }
    )
  }

  render () {
    // Get atData, probably from props
    const atData = this.props.atData

    // The address is stored in the component state.
    // We'll show a loading message while we're waiting for the data.
    const address = this.state.address

    return ( 
      <tr key={atData.uid}> 
        <td>{atData.uid}</td> 
        <td>{atData.user}</td> 
        <td><TimeStamp time={atData.dateTime} format='full' /></td> 
        <td>{ address || 'Loading address...' }</td> 
      </tr> 
    )
  } 
}

您可以通过多种方式改进此示例代码

如果Geocode失败，则呈现错误消息
在等待<tr>完成时呈现加载微调器（而不是Geocode）
从Geocode生命周期方法执行componentDidUpdate，以便我们在纬度或经度发生变化时更新地址
如果失败，请重试Geocode

能够得到响应但无法显示反应

1 个答案: