Question

关于一般反应计划流程/良好做法的问题。我需要知道用户的GPS坐标，所以我有一个用于我的map类的父组件，它获取用户lat / lng，然后一旦收到，我生成一个包含graphQL函数的组件使用我检索到的lat / lng并查找用户附近可用的位置。一旦检索到这些lat / lng位置值，我就会生成一个新的组件，该组件将位置作为道具传递，以便谷歌地图可以为它们生成标记。这是处理这种情况的正确反应/阿波罗方式吗？如果没有，我该如何改进呢？

以下代码：

import React, {Component} from 'react'
import MapContainer from './Map/GoogleMap'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'

export default class Home extends Component {

  constructor(props) {
    super(props);

    this.state = {
      lat: 0,
      lng: 0
    }
  }

  componentDidMount() {
  //retrieve the users GPS coordinates
    navigator.geolocation.getCurrentPosition(
      position => {
        this.setState({ lat: position.coords.latitude, lng: position.coords.longitude});
      },
      error => console.log(error)
    );
  }

  render(){
  //kind of buggy here, on first render, this.props.lat is undefined, then after this.state.lat !== 0, it runs the graphQL query, so then this.state.lat value gets set to this.props.lat, and this.state.lat is reset to 0. Probably should be a better way to do this...
    if(!this.props.lat){
      if(this.state.lat === 0){
        return <p>Getting your location..</p>
      }
    }

    if(this.props.retrieveLocationsQuery && this.props.retrieveLocationsQuery.loading) {
      return <div>Getting the freshest spots</div>
    }
    if(this.props.retrieveLocationsQuery && this.props.retrieveLocationsQuery.error) {
      return <div>Error</div>
    }
    let renderedComponent = this.props.retrieveLocationsQuery
    ? <MapContainer lat={this.props.lat} lng={this.props.lng} locations={this.props.retrieveLocationsQuery.locations} />
    : <LocationQuery lat={this.state.lat} lng={this.state.lng} />
    return (
      <div>
        {renderedComponent}
      </div>
    )
  }
}
const RETRIEVE_LOCATIONS_QUERY = gql`
  query locations ($lat: Float!, $lng: Float!){
    locations (lat: $lat, lng: $lng){
      id
      loc {
        lat
        lng
      }
      title
      description
      times
      createdBy {
        id
      }
    }
  }
`
const LocationQuery = graphql(RETRIEVE_LOCATIONS_QUERY, {name: 'retrieveLocationsQuery'})(Home)

通过有条件地渲染组件来运行React-Apollo查询？

0 个答案: