我如何更新React中的地理位置状态

Question

我正在尝试获取用户的地理位置，并以纬度和经度更新状态。我遵循了MDN文档的地理位置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的更多信息。了解您是否要在React.js中工作。