Question

我是reactJS的新手

模块：一旦用户单击“方向”按钮，我就可以找到每个商店的模块。它将自动将标记显示到该位置。注意：每个ID都有不同的位置。

问题：如果我使用静态值，则谷歌地图可以工作，但是，如果我使用API响应数据，则谷歌地图只能转到灰色框。

静态：

this.state = {
  //working if the value is static
  lat:-35.400,
  long:150.644
}

Api响应：

this.state = {
  //not working if the value came from API set state
  lat:'',
  long:''
}

组件

componentDidMount() {

    const id = this.props.match.params.id;
    axios.get('/api/find_store_location/' + id).then(response => {
        this.setState({
            markers: response.data,
            lat:response.data[0].store_lat,
            long:response.data[0].store_long,
        })

    }).catch(error => console.log(error));
  }

Const Map：

    const Map = withScriptjs(withGoogleMap((props) =>
    <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: parseFloat(props.lat), lng: parseFloat(props.lon)}}
    >
    {props.isMarkerShown && 
      <Marker position={{ lat: parseFloat(props.lat), lng: parseFloat(props.lon)}} />
    }
    </GoogleMap>
));

渲染图：

    <Map

     googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWCz4V5r29GxcGZKNtFzE9v4gOSnKVMYA"
     loadingElement={<div style={{ height: `100%` }} />}
     containerElement={<div style={{ height: `400px` }} />}
     mapElement={<div style={{ height: `100%` }} />}
     lat={this.state.lat}
     lon={this.state.long}

 />

ReactJS：lat和long属性未正确初始化

0 个答案: