Réagissez: API Google Places/Détails des lieux

Question

J'ai le code suivant qui récupère les avis Google Adresses basés sur l'API Google Adresses. J'ai incorporé la logique pour fonctionner comme un composant du cycle de vie React. Actuellement, je suis incapable de définir et de lier correctement l'objet. Je pourrais utiliser un peu d'aide pour comprendre où ma logique échoue.

export default class Reviews extends React.Component{ 
constructor(props){ 
    super(props); 
    this.state = { 
     places: [] 
    } 
    } 


componentDidMount(){ 


let map = new google.maps.Map(document.getElementById("map"), { 
    center: {lat:40.7575285, lng: -73.9884469} 
    }); 

    let service = new google.maps.places.PlacesService(map); 

service.getDetails({ 
    placeId: 'ChIJAUKRDWz2wokRxngAavG2TD8' 
    }, function(place, status) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
     console.log(place.reviews); 
     // Intended behavior is to set this.setState({places.place.reviews}) 
    } 
    }) 
} 
render(){ 
const { places } = this.state; 
return(
    <div> 
    <p> 
     { 
     places.map((place) => { 
      return <p>{place.author_name}{place.rating}{place.text}</p> 
     }) 
     } 
    </p> 
    </div> 
) 
} 
} 

Answer 1

Vous ne pouvez pas utiliser this cette façon dans un rappel. Lorsque la fonction est appelée this, this.setState({places.place.reviews}) ne pointe pas vers votre objet. Une solution consiste à utiliser la notation de fonction => qui liera this lexicalement.

service.getDetails({ 
    placeId: 'ChIJAUKRDWz2wokRxngAavG2TD8' 
}, (place, status) => { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
     console.log(place.reviews); 
     this.setState({places: place.reviews}) 
    } 
    }) 
} 

Sinon, vous pouvez faire une nouvelle référence à this et nous dans la fonction. Quelque chose comme

var that = this 
... 
that({places.place.reviews}) 

La première option est plus agréable, mais nécessite un environnement où vous pouvez utiliser ES6. Depuis votre utilisation let vous êtes probablement d'accord.

Answer 2

Avec quelques ajustements - j'ai le code pour travailler! Je vous remercie.

render(){ 
const { places } = this.state; 
return(
    <div> 
    <p> 
     { 
     places.map((place) => { 
      if(place.rating >= 4){ 
      return <p key={place.author_name}>{place.author_name}{place.rating}{place.text}</p> 
      } 
     }) 
     } 
    </p> 
    </div> 
) 
}