javascript - React Google Maps - 标记位置不动态绑定(bind)

Question

class Map extends Component
{
  constructor(props)
  {
    super(props)
    this.state = {
      listHouse:[{"_id":"5aaa4cb5dab4f51645d3e257","location":{"lat":"32.7020541","lng":"-97.2755012","__typename":"locationType"},"__typename":"rentType"},{"_id":"5aa8c86b0815090a6610f7d9","location":{"lat":"32.5872886","lng":"-97.0258724","__typename":"locationType"},"__typename":"rentType"},{"_id":"5aa8c9230815090a6610f7da","location":{"lat":"35.2962839","lng":"-98.2031782","__typename":"locationType"},"__typename":"rentType"}]
    }
  }


render()
 {
    return (
          <GoogleMap
            defaultZoom={10}
            defaultCenter={{ lat: 32.6804468, lng: -97.0827933 }}
          >
          {
            (this.state.listHouse && this.state.listHouse.length > 0)?
            (
              this.state.listHouse.map((house,key) =>{
                console.log("house details..." +JSON.stringify(house))
                  return(<Marker position={{ lat: house.location.lat, lng:house.location.lng}}
                  />

                )

                })

            ):(null)

          }
          </GoogleMap>
      );
     }

当我试图从一个状态动态绑定(bind)纬度和经度时，我收到这样的错误 index.js:2177 InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number,这些动态值在return语句中没有赋值给Marker位置

Answer 1

试试这个..Apollo 中的某些对象值可能无法读取，因此请将这些值复制到另一个对象并尝试。

{
            (this.state.listHouse && this.state.listHouse.length > 0)?
            (
              this.state.listHouse.map((house,key) =>{
                console.log("house details..." +JSON.stringify(house))
                  let houseObject = Object.assign({},house);
                  return(<Marker position={{ lat: houseObject.location.lat, houseObject.location.lng}}
                  />

                )

                })

            ):(null)

          }