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

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 中工作，那么理解这是一个非常重要的概念。