Update-Status basierend auf Google Places API-Aufruf

Question

Ich habe Probleme zu verstehen, wie Sie den Status aus einer Callback-Funktion setzen.

Google standardmäßig gibt uns diesen Code zu get data from their place API

Was will ich wissen, ist:

• Wie kann ich Zustand hier von „isOpen“ aktualisieren basierend auf den empfangenen Daten aus dieser API?

  • ich nicht „this.setState“ als ‚das‘ bezieht sich nicht

  • zum globalen Zustand tun kann, ich werde das ganze Land „isOpen“ (true/false) verwenden, um erklären eine Variable mit bedingter JSX.

    export default class IndexPage extends Component { 
        constructor(props) { 
        super(props); 
        this.state = { 
         isOpen: false, 
        }; 
    } 
    
    
    componentDidMount() { 
    let map = new window.google.maps.Map(document.getElementById("map"), { 
    
    }); 
    const request = { placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4" }; 
    const getPlaceById = new google.maps.places.PlacesService(map).getDetails(
    request, 
    callback 
    ); 
    
    function callback(place, status) { 
        if (status == google.maps.places.PlacesServiceStatus.OK) { 
        console.log(place.opening_hours.open_now); //returns true or false 
    
        //set isOpen to state 
    
        } 
    } 
    } 
    } 
    

Answer 1

Wenn Sie den Rückruf zurückgeben, ohne ihn an die Komponente zu binden, wird der Fehler 'setState of undefined' zurückgegeben.

deklarieren Callback-Funktion als eine Klassenmethode Ihrer Reaktionskomponente.

class X extends React.Component { 
    ... 

    callback(place, status) { 
     if (status == google.maps.places.PlacesServiceStatus.OK) {    
      // set state here 
      this.setState({ isOpen: place.opening_hours.open_now}) 
     } 
    } 

    ... 
} 

dann in Ihrem componentDidMount() -Aufruf binden Ihre Callback-Methode wie folgt:

componentDidMount() { 
    const map = new window.google.maps.Map(document.getElementById("map"), {});  
    const request = { placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4" }; 
    const getPlaceById = new google.maps.places.PlacesService(map).getDetails(
     request, 
     // you need to bind `this` to callback function to use callback in HTML DOM 
     (place, status) => this.callback(place, status) 
    ); 
} 

Answer 2

Grundsätzlich binden diese an Ihre Rückruf innerhalb des Konstruktors

this.callback = this.callback.bind(this); 

Sie erhalten folgendes

const getPlaceById = new 
google.maps.places.PlacesService(map).getDetails(
request, 
this.callback 
); 

Für weitere Informationen zu bearbeiten, lesen https://reactjs.org/docs/handling-events.html