React：Google 地点 API/ 地点详情

Question

我有以下代码可以根据 Google 个地点 API 检索 Google 个地点评论。我已经合并了作为 React 生命周期组件工作的逻辑。目前，我无法设置状态并正确绑定对象。我可以使用一些帮助来理解我的逻辑在哪里失败。

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

您不能在回调中以这种方式使用 this。当函数在this中被调用时，this.setState({places.place.reviews})并没有指向你的对象。一种解决方案是使用 => 函数符号，它会在词法上绑定 this。

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

或者您可以重新引用 this 并在函数中使用它。像

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

第一个选项更好，但需要一个可以使用 ES6 的环境。因为你使用 let 你可能没问题。

Answer 2

经过一些调整 -- 我得到了可以工作的代码！谢谢。

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>
 )
}

React：Google 地点 API/ 地点详情

React: Google Places API/ Places Details

components

setstate

google-places-api

reactjs