React组件调用Geolocation报错Cannot read property 'showPosition' of undefined求助

你遇到的Cannot read property 'showPosition' of undefined错误，核心原因是React类组件中方法的this绑定丢失——虽然你尝试绑定了showPosition，但漏掉了getGeoLocation方法的this绑定，导致调用getGeoLocation时，方法内部的this指向undefined（严格模式下），自然无法访问this.showPosition。

下面是几种可行的修复方案，按推荐程度排序：

方案一：使用箭头函数定义类方法（最简洁） #

箭头函数会自动捕获当前上下文的this（也就是组件实例），不需要手动绑定：

import React, { Component } from 'react';
import './css/addItem.css';

class AddItem extends Component {
    // 用箭头函数定义方法，this自动绑定到组件实例
    showPosition = (position) => {
        console.log("Latitude: ", position.coords.latitude + " Longitude: ", position.coords.longitude);
    }

    getGeoLocation = () => {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(this.showPosition);
        } else { 
            console.log("Geolocation is not supported by this browser.");
        }       
    }

    render() {
        return (
            <div>
                .....
                .....
                <button onClick={this.getGeoLocation}>Get GeoLocation</button>
            </div>
        );
    }
}

export default AddItem;

方案二：在构造函数中绑定所有用到的方法 #

如果你习惯使用普通类方法，可以在构造函数中同时绑定getGeoLocation和showPosition：

import React, { Component } from 'react';
import './css/addItem.css';

class AddItem extends Component {
    constructor(props) {
        super(props);
        // 同时绑定两个方法的this到组件实例
        this.getGeoLocation = this.getGeoLocation.bind(this);
        this.showPosition = this.showPosition.bind(this);
    } 

    showPosition(position) {
        console.log("Latitude: ", position.coords.latitude + " Longitude: ", position.coords.longitude);
    }

    getGeoLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(this.showPosition);
        } else { 
            console.log("Geolocation is not supported by this browser.");
        }       
    }

    render() {
        return (
            <div>
                .....
                .....
                <button onClick={this.getGeoLocation}>Get GeoLocation</button>
            </div>
        );
    }
}

export default AddItem;

方案三：在点击事件中用箭头函数调用方法 #

这种方式不需要修改方法定义，直接在onClick中用箭头函数包裹调用：

<button onClick={() => this.getGeoLocation()}>Get GeoLocation</button>

注意：这种方式每次组件渲染都会创建一个新的箭头函数，对于简单组件来说影响不大，但如果是频繁渲染的大型组件，可能会有轻微的性能损耗，此时更推荐前两种方案。

方案四：在回调中直接使用箭头函数（补充方案） #

你也可以在getCurrentPosition的回调里直接用箭头函数，确保this指向正确：

getGeoLocation() {
    if (navigator.geolocation) {
        // 用箭头函数作为回调，this会指向组件实例
        navigator.geolocation.getCurrentPosition((position) => {
            this.showPosition(position);
        });
    } else { 
        console.log("Geolocation is not supported by this browser.");
    }       
}

不过这种方法仍然需要确保getGeoLocation自身的this是正确的，所以还是需要绑定getGeoLocation或者用箭头函数定义它。

内容的提问来源于stack exchange，提问作者StrugglingCoder