开发者问题收集

无法读取未定义的属性 x

2018-03-16
115

在我的一个 React 组件中,

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;

它显示 无法读取未定义的属性“showPosition”

GeoLocation 根本不起作用

作为 React 新手,我尝试过,

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

在构造函数中。

但这没有帮助。

有人可以 解释 我做错了什么以及如何修复它吗?

1个回答

您的函数 getGeoLocation 是使用另一个上下文调用的。React 不会自动绑定您的事件侦听器或任何其他函数。因此,您会在 getGeoLocation 中收到 this === undefined 。要解决此问题,您可以在构造函数中使用 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;
Nik
2018-03-16