ホーム>source

geolocation 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() { } }
あなたの答え
  • 解決した方法 # 1

    ウィズウィズ
    

    setStateは非同期操作です。つまり、状態の更新は将来完了する予定です。状態がいつ更新されるかを確認する場合は、2番目の引数を使用できます。

    <前>ウィズウィズ

    この2番目のコールバックは、状態の更新が完了すると呼び出されるため、正確な問題を通知します。

  • 解決した方法 # 2

    あなたは太った矢印関数にいるので、 const getData = () => { // 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"); } ); } } componentDidMount(){ const success = position => { this.setState({lat: position.latitude, long: position.longitude}, () => { this.getData(); }) } } を使用してこれを再定義できます 、代わりにself.setStateを使用します

  • 解決した方法 # 3

    非同期呼び出しを行わず、 this.setState({lat:latitude, long: longitude}, () => {console.log(this.state)}); を呼び出さない  反応コンポーネントのコンストラクタ内。

    ウィズウィズ

    let self = this を使用する  データをフェッチして状態を更新するライフサイクル関数。

    <前>ウィズウィズ

    状態の更新は非同期です

    反応状態の更新は非同期であり、現在のレンダリングサイクルの最後に処理するためにキューに入れられます。あなたはから状態値にアクセスしています電流 レンダーサイクル。次のサイクルのレンダーサイクルではありません。 this.setState から保存された緯度と経度の値を移動する  

    Youshould not call setState()in the constructor().

    の関数スコープを呼び出す  後の componentDidMount で使用します  状態 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); } を使用する場合と  & navigator.geolocation.getCurrentPosition

    <前>ウィズウィズ componentDidMount

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ php - 私の単純なユーザー認証システムは十分に安全ですか?