Question

我正在尝试获取用户的地理位置，并使用纬度和经度更新状态。我遵循了the MDN docs for the Geolocation API，但是即使我根据文档定义了成功，也遇到了一个错误，即成功未定义。如何使此代码起作用？

class App extends React.Component {
    state = { latitude: null, longitude: null };

    componentDidMount() {
        window.navigator.geolocation.getCurrentPosition(
            success => this.state.latitude =
                success.coords.latitude, this.state.longitude = success.coords.longitude
        );
    }

    render() {
        return <div>{this.state.latitude}, {this.state.longitude}</div>;
    }

}

Answer 1

此错误在控制台中可能会造成一些混乱，因为该错误实际上并非与success有关，而是与this引用success有关。您没有正确分配状态。您必须使用setState更改状态。您不能通过直接为其分配新值来更改状态。

class App extends React.Component {
    state = { latitude: null, longitude: null };

    componentDidMount() {
        window.navigator.geolocation.getCurrentPosition(
            success => this.setState({ latitude: success.coords.latitude, longitude: success.coords.longitude })
        );
    }

    render() {
        return <div>{this.state.latitude}, {this.state.longitude}</div>;
    }
}

您可以了解有关关键字this here的更多信息。了解您是否要使用React.js是一个非常重要的概念。

如何在React中更新地理位置状态？

1 个答案: