Question

我有以下代码，如果设备位置可用，它会更改状态内的电线值。

class App extends Component{
  state={
    cords:{
      longitude:24.01,
      latitude:38.22
    },
    data:{}
  }
  componentDidMount() {
    console.log("Mounted")
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position=>{
      let newCords={
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      }
      this.setState({cords:newCords});
      console.log("Inside",this.state);//displays new values
    });
    };
    console.log(this.state);// displays old values

仅在箭头函数内部可以观察到state（）的变化。如何在整个if块之外获取更改后的值？

Answer 1

由于setState是异步的，因此，您将仅在状态的回调函数中获取更新的值，在这种情况下，即状态的箭头函数。由于navigator.geolocation.getCurrentPosition是一个异步函数，因此它甚至不返回Promise。因此，一旦执行了此操作，代码便会继续执行更多的代码行，但是此时navigator.geolocation.getCurrentPosition的响应尚未到来，并且自此之后，状态和连接线也未设置。因此，在您的API调用navigator.geolocation.getCurrentPosition成功之前，您永远不会在if语句之外获得coords值。一旦获得成功，就会执行您在回调中编写的代码（即下面编写的代码）。

let newCords={
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      }
      this.setState({cords:newCords});
      console.log("Inside",this.state);//displays new values

因此，这就是代码的工作方式。可能您需要更改逻辑。由于navigator.geolocation.getCurrentPosition也不返回承诺，因此您也无法等待。虽然不建议这样做，但是您可以在一段时间内盲目设置timeTimeOut，时间响应如下所示

 componentDidMount() {
    console.log("Mounted")
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position=>{
      let newCords={
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      }
      this.setState({cords:newCords});
      console.log("Inside",this.state);//displays new values
    });
    };
    setTimeout(() => {
      console.log(this.state);
    }, 3000);

Answer 2

我认为@Anarno的答案是正确的。我不知道为什么它被否决了。来自navigator的函数是异步的，并且在它改变状态之前，您正在尝试在if之外记录状态，它将确保为您提供旧值，并且我无法关联记录的内容，您将获得状态值已更新。使用React-tools而不是控制台记录器来查看状态如何变化。

Answer 3

您可以使用temp变量获取if块之外的值，可以按以下方式使用

componentDidMount() {
let temp={}
console.log("Mounted")
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(position=>{
  let newCords={
    latitude: position.coords.latitude,
    longitude: position.coords.longitude
  }
temp=newCords;
  this.setState({cords:newCords});
  console.log("Inside",this.state);//displays new values
});
};
console.log(this.state);
console.log('temp variable having new data',temp)
}

使setState（）更改整个类的状态变量

3 个答案: