Javascript 状态未使用地理位置函数中的setState进行更新

当我从地理定位api获取坐标时，我正在尝试更新状态。但国家没有更新。我将回调放在setState中，以检查更新坐标时得到了什么，但它是未定义的。 但我不知道应该把这个setState放在哪里来更新实际坐标

class App extends React.Component {
  constructor(props) {
    super(props);
    // App State
    this.state = {
      lat: 0,
      lng: 0
    };
  }
  // ComponentDIDMount
  componentDidMount() {
    // Get Data from json file

    $.getJSON("../resturants.json", data => {
      this.setState({
        resturantsList: data
      });
    });

    // Get location of user
    let success = position => {
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;
      console.log(latitude, longitude);
      this.setState(
        {
          lat: latitude,
          lng: longitude
        },
        () => console.log(latitude, longitude)
      );
      console.log(this.state);
    };

    function error() {
      console.log("Unable to retrieve your location");
    }
    navigator.geolocation.getCurrentPosition(success, error);

    // Api call for resturants data
    const proxyurl = "https://cors-anywhere.herokuapp.com/";
    const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${this.state.lat},${this.state.lng}&radius=3000&type=restaurant&key=apikey`;
    console.log(url);
    fetch(proxyurl + url)
      .then(res => res.json())
      .then(
        result => {
          console.log(result.results);
          let apiResturants = result.results;
          let allResturants = this.state.resturantsList.concat(
            ...apiResturants
          );
          this.setState({
            resturantsList: allResturants
          });
        },

        error => {
          console.log("error");
        }
      );
  }
  }

  // Render function for app component
  render() {


  }
}

以下是解决方案：

const getData=（）=>{
//餐馆数据的Api调用
常量proxyurl=”https://cors-anywhere.herokuapp.com/";
常量url=`https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${this.state.lat}，${this.state.lng}&radius=3000&type=restaurant&key=apikey`；
console.log（url）；
获取（代理url+url）
.then（res=>res.json（））
.那么(
结果=>{
console.log（result.results）；
让apiResturants=result.results；
让allResturants=this.state.resturantsList.concat(
…餐馆
);
这是我的国家({
餐厅列表：所有餐厅
});
},
错误=>{
控制台日志（“错误”）；
}
);
}
}
componentDidMount（）{
const success=位置=>{
this.setState（{lat:position.latitude，long:position.longitude}，（）=>{
这是getData（）；
})
}
}

以下是解决方案：

const getData=（）=>{
//餐馆数据的Api调用
常量proxyurl=”https://cors-anywhere.herokuapp.com/";
常量url=`https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${this.state.lat}，${this.state.lng}&radius=3000&type=restaurant&key=apikey`；
console.log（url）；
获取（代理url+url）
.then（res=>res.json（））
.那么(
结果=>{
console.log（result.results）；
让apiResturants=result.results；
让allResturants=this.state.resturantsList.concat(
…餐馆
);
这是我的国家({
餐厅列表：所有餐厅
});
},
错误=>{
控制台日志（“错误”）；
}
);
}
}
componentDidMount（）{
const success=位置=>{
this.setState（{lat:position.latitude，long:position.longitude}，（）=>{
这是getData（）；
})
}
}

由于您使用的是胖箭头函数，您可以使用

让self=this

重新定义this，然后改用self.setState

由于您使用的是胖箭头函数，您可以使用

让self=this

重新定义this，然后改用self.setState

不要进行异步调用，也不要在react组件中调用

this.setState

不应调用构造函数（）中的setState（）

使用

componentDidMount

lifecycle函数获取数据并更新状态

constructor(props) {
  super(props);

  // App State
  this.state = {
    lat: 0,
    lng: 0
  }
};

componentDidMount() {
  // Get location of user
  const success = position => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log(latitude, longitude);
    this.setState({
      lat: latitude,
      lng: longitude
    });
  };

  const error = () => {
    console.log("Unable to retrieve your location");
  };

  navigator.geolocation.getCurrentPosition(success, error);
}

状态更新是异步的

React状态更新是异步的，并在当前渲染周期结束时排队等待处理。您正在访问当前渲染周期的状态值，而不是下一个渲染周期的状态值。将从

navigator.geolocation.getCurrentPosition

调用保存的lat和long值移动到

componentDidMount

的功能范围内，并在以后的

fetch

中使用它们，而不是使用状态

lat

和

lng

componentDidMount() {
  // Get Data from json file

  $.getJSON("../resturants.json", data => {
    this.setState({
      resturantsList: data
    });
  });

  // Get location of user
  // Move latitude and longitude to function scope
  let latitude = 0;
  let longitude = 0;

  let success = position => {
    // cache values
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
    console.log(latitude, longitude);
    this.setState(
      {
        lat: latitude,
        lng: longitude
      },
      () => console.log(latitude, longitude)
    );
    console.log(this.state);
  };

  function error() {
    console.log("Unable to retrieve your location");
  }
  navigator.geolocation.getCurrentPosition(success, error);

  // Api call for resturants data
  const proxyurl = "https://cors-anywhere.herokuapp.com/";
  // use cached lat & long values
  const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${
    latitude
  },${longitude}&radius=3000&type=restaurant&key=apikey`;
  console.log(url);
  fetch(proxyurl + url)
    .then(res => res.json())
    .then(
      result => {
        console.log(result.results);
        let apiResturants = result.results;
        let allResturants = this.state.resturantsList.concat(
          ...apiResturants
        );
        this.setState({
          resturantsList: allResturants
        });
      },

      error => {
        console.log("error");
      }
    );
}

---

不要进行异步调用，也不要在react components内调用

this.setState

不应调用构造函数（）中的setState（）

使用

componentDidMount

lifecycle函数获取数据并更新状态

constructor(props) {
  super(props);

  // App State
  this.state = {
    lat: 0,
    lng: 0
  }
};

componentDidMount() {
  // Get location of user
  const success = position => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log(latitude, longitude);
    this.setState({
      lat: latitude,
      lng: longitude
    });
  };

  const error = () => {
    console.log("Unable to retrieve your location");
  };

  navigator.geolocation.getCurrentPosition(success, error);
}

状态更新是异步的

React状态更新是异步的，并在当前渲染周期结束时排队等待处理。您正在访问当前渲染周期的状态值，而不是下一个渲染周期的状态值。将从

navigator.geolocation.getCurrentPosition

调用保存的lat和long值移动到

componentDidMount

的功能范围内，并在以后的

fetch

中使用它们，而不是使用状态

lat

和

lng

componentDidMount() {
  // Get Data from json file

  $.getJSON("../resturants.json", data => {
    this.setState({
      resturantsList: data
    });
  });

  // Get location of user
  // Move latitude and longitude to function scope
  let latitude = 0;
  let longitude = 0;

  let success = position => {
    // cache values
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
    console.log(latitude, longitude);
    this.setState(
      {
        lat: latitude,
        lng: longitude
      },
      () => console.log(latitude, longitude)
    );
    console.log(this.state);
  };

  function error() {
    console.log("Unable to retrieve your location");
  }
  navigator.geolocation.getCurrentPosition(success, error);

  // Api call for resturants data
  const proxyurl = "https://cors-anywhere.herokuapp.com/";
  // use cached lat & long values
  const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${
    latitude
  },${longitude}&radius=3000&type=restaurant&key=apikey`;
  console.log(url);
  fetch(proxyurl + url)
    .then(res => res.json())
    .then(
      result => {
        console.log(result.results);
        let apiResturants = result.results;
        let allResturants = this.state.resturantsList.concat(
          ...apiResturants
        );
        this.setState({
          resturantsList: allResturants
        });
      },

      error => {
        console.log("error");
      }
    );
}

---

你不应该使用

this.state=…

初始化state，状态更新是异步的，请检查官方文档。你能告诉我这个异步更新如何影响状态更新吗？如果你的日志未定义，那么很明显这里的问题不是React或setState，而是，您的API没有返回您认为返回的内容。记录

位置

并查看是否有任何提示。如果没有，您需要查看您的

navigator.geolocation.getCurrentPosition

以查看是否正确使用它。您不应该使用

this.state=…

初始化状态，并且状态更新是异步的，请检查官方文档，你能告诉我这个异步更新是如何影响状态更新的吗？如果你的日志给出的是未定义的，那么请仔细检查，显然这里的问题不是React或setState，而是你的API没有返回你认为返回的内容。记录

位置

并查看是否有任何提示。如果没有，您需要查看您的

navigator.geolocation.getCurrentPosition

，看看您是否正确使用了它。好的，现在我看到回调也返回了准确的位置，但是我如何使setState在他获得准确值时进行状态更新。i、 e lat/lngif您正在控制台中记录回调中的状态并获得正确的结果，这意味着状态已被更新。您完全正确，但我有一个api调用，它从状态中获取位置变量。即使在状态更新之后，它也不会发出请求，这就是为什么我认为状态没有更新的原因。const url=

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${this.state.lat}，${this.state.lng}&radius=3000&type=restaurant&key=apikey

您正在使用state