Question

我从getCurrentPosition的回调函数调用getReverseGeocodingData（）。得到以下错误功能没有定义？

getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position){
                console.log(position.coords.latitude);
                console.log(position.coords.longitude);

             getReverseGeocodingData(position.coords.latitude,position.coords.longitude);
                alert('Ahmad');
            });
        } else {
             console.error("Geolocation is not supported by this browser.");
        }
    }
    getReverseGeocodingData(lat, lng){
        var latlng = new google.maps.LatLng(lat, lng);
        // This is making the Geocode request
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'latLng': latlng }, function (results, status) {
            if (status !== google.maps.GeocoderStatus.OK) {
                alert(status);
            }
            // This is checking to see if the Geoeode Status is OK before proceeding
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results);
                var address = (results[0].formatted_address);
            }
        });
    }

我正在使用流星与反应，上面的代码在反应组件之一我试着用这个带有括号的关键字调用if而没有？

我尝试了以下选项，但它没有帮助我得到getReverseGeocodingData不是函数!! this.getReverseGeocodingData（position.coords.latitude，position.coords.longitude）.bind（本）;

getReverseGeocodingData(position.coords.latitude,position.coords.longitude).bind(this);


this.getReverseGeocodingData(position.coords.latitude,position.coords.longitude).bind();

this.getReverseGeocodingData(position.coords.latitude,position.coords.longitude);

控制台错误的屏幕截图

我更新了代码如下，但我仍然是下面的问题无法读取未定义

的属性'getReverseGeocodingData'

export default class AddUser extends React.Component {
    constructor(props){
            this.getReverseGeocodingData = this.getReverseGeocodingData.bind(this);
        }
        getReverseGeocodingData(lat, lng) {
            var latlng = new google.maps.LatLng(lat, lng);
            // This is making the Geocode request
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status !== google.maps.GeocoderStatus.OK) {
                    alert(status);
                }
                // This is checking to see if the Geoeode Status is OK before proceeding
                if (status == google.maps.GeocoderStatus.OK) {
                    console.log(results);
                    var address = (results[0].formatted_address);
                }
            });
        }

        getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition((position) => {
                    console.log(position.coords.latitude);
                    console.log(position.coords.longitude);

                    this.getReverseGeocodingData(position.coords.latitude, position.coords.longitude);
                });
            } else {
                console.error("Geolocation is not supported by this browser.");
            }
        }

为最后一次更改添加了屏幕截图。

通过在html中添加bind来解决问题。

非常感谢。

Answer 1

您应该使用this.getReverseGeocodingData(...)。此外，如果您将this传递给其他组件，则应明确绑定getLocation（否则您将丢失对当前组件的this引用）

Answer 2

我发现的最好方法是绑定构造函数中所需的所有函数：

export default class AddUser extends React.Component {
    constructor(props) {
        super(props);

        this.getReverseGeocodingData = this.getReverseGeocodingData.bind(this);
    }

    someFunction() {
        this.getReverseGeocodingData(...)
        ...
    }
}

这样您就不必在每个渲染上绑定this。

然后你需要使用箭头功能来维持this：

的范围

navigator.geolocation.getCurrentPosition(position => {
    this.getReverseGeocodingData(...);
    ...
});

Answer 3

您必须使用this关键字。

this.getReverseGeocodingData(position.coords.latitude,position.coords.longitude);

在另一个反应组件函数内调用反应组件函数？

3 个答案: