使 setState() 改变整个班级的状态变量

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-block 之外获取更改的值？

Answer 1

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

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 也没有返回承诺，所以你也不能等待。虽然不推荐，但你可以盲目地设置TimeOut，到时候响应如下

 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

您可以使用临时变量来获取 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)
}