Question

第20行的状态设置为showNoResultsMessage时出现以下错误

TypeError: this is undefined

我认为这可能是由于调用“ this”的上下文存在问题。但是，我不确定在设置状态时如何解决此问题或在这种情况下this是什么。我猜它是空的，需要通过某种方式传递。

任何帮助将不胜感激。预先感谢。

import React from 'react';
import ReactDOM from 'react-dom';

class MainApp extends React.Component {
    constructor(props) {
        super(props);        
        this.getLocation();
    }

    getPlaces(position) {
        const mainDiv = document.querySelector("#main-app");
        const mapTag = mainDiv.getAttribute('data-map');
        let apiUrl = "https://example.com/places.json";

        const url = apiUrl + "?lat=" + position.coords.longitude + "&lon=" + position.coords.latitude + "&tags=" + mapTag;

        console.log("mapag: " + mapTag);
        console.log("url: " + url);
        this.setState({showNoResultsMessage: true});
    };

    /**
     *  Could not get location, present error message
     */
    locationErrorHandler(err) {
        if (err.code == 1) {
            alert("Error: Access is denied!");
        } else if (err.code == 2) {
            alert("Error: Position is unavailable!");
        }
    }

    /**
     * First attempts to get location and from there, runs the api call to get places.
     */
    getLocation() {
        if (navigator.geolocation) {
            // timeout at 60000 milliseconds (60 seconds)
            var options = {timeout: 60000};
            navigator.geolocation.getCurrentPosition(this.getPlaces, this.locationErrorHandler, options);
        } else {
            alert("Sorry, browser does not support geolocation!");
        }
    }

    render() {
        return (
            <div>
                <div>Get Started</div>
            </div>
        );
    }
}

ReactDOM.render(
    <MainApp/>,
    document.getElementById('main-app')
)

Answer 1

您应该像这样在构造函数中绑定函数：

this.getLocation.bind(this);

或使用如下箭头函数语法：

 getLocation = () => {
    if (navigator.geolocation) {
        // timeout at 60000 milliseconds (60 seconds)
        var options = {timeout: 60000};
        navigator.geolocation.getCurrentPosition(this.getPlaces, this.locationErrorHandler, options);
    } else {
        alert("Sorry, browser does not support geolocation!");
    }
}

Answer 2

您需要在构造函数中绑定内部函数。通过以下更新您的构造函数代码：

constructor(props) {
    super(props);
    this.state = {
        showNoResultsMessage: false 
    }
    this.getPlaces = this.getPlaces.bind(this);
    this.locationErrorHandler = this.locationErrorHandler.bind(this);
    this.getLocation = this.getLocation.bind(this);
}

我还观察到您正在函数中设置状态，但未初始化它。在构造函数中也添加了状态。您可以根据需要更改其值。

设置状态会导致TypeError：这是未定义的

2 个答案: