javascript - 无法读取未定义的属性x

在我的反应成分之一中，

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

class AddItem extends Component {
    constructor(props) {
        super(props);
    }
    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;

我说Cannot read property 'showPosition' of undefined。

GeoLocation is simply not working。

我是React的新手，

this.showPosition = this.showPosition.bind(this);

在构造函数中。

但这没有帮助。

有人可以解释一下我在做什么错以及如何解决吗？

最佳答案

您的函数getGeoLocation是在另一个上下文中调用的。 React不会自动绑定您的事件监听器或任何其他函数。因此，您在this === undefined中收到getGeoLocation。要解决此问题，可以在构造函数中使用this.getGeoLocation = this.getGeoLocation.bind(this)，或仅将类属性与箭头函数一起使用。例如：

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

class AddItem extends Component {
    constructor(props) {
        super(props);
    }
    showPosition(position) {
        console.log("Latitude: ",position.coords.latitude+
        " Longitude: ",position.coords.longitude);
    }
    // We use class property with arrow function to bind context:
    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;

关于javascript - 无法读取未定义的属性x，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49317407/