Question

我创建了两个组件。一种用于地图，另一种用于某些输入。我有两个输入来获取经度和纬度。我正在使用longitude= {this.state.longitude} latitude = {this.state.latitude}将来自用户的经度和纬度传递给我的其他组件。如果用户尚未输入经度或纬度，或者用户清除了输入内容，则应显示这些坐标lat: 22.5726, lng: 88.3639。我该怎么做？到目前为止，这是我所做的。当我通过坐标时不会显示位置。我做错了什么？而且我还想知道当用户清除输入时如何显示默认坐标？当我console.log this.props.latitude时出现以下错误TypeError: Cannot read property 'latitude' of undefined.我认为我的数据没有正确传递给我的地图组件！如果有人知道如何解决此问题，请告诉我们！

这是我的文件结构。

MainFolder
 |
 |__ navigation.js
 |
 |__ right folder
 |     |
 |     |__form.js(this is where i have two inputs)
 |     |
 |     |__ MapContainerFolder
 |           |
 |           |__MapContainer.js
 |
 |
 |__ left folder
       |
       |__left.js

在我的表单组件中，我有以下代码

 <MapContainer
     longitude= {this.state.longitude}
     latitude = {this.state.latitude}
 />

在我的navigation.js中，我有这个

 <form/>
<left/>

这是我的mapContainer.js

import React, { Component } from "react";
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

export class MapContainer extends Component {

  render() {
    const style = {
      width: '24%',
      height: '65%'
    }
    return (
      <Map 
      style={style} 
      google={this.props.google} 
      zoom={14}
      initialCenter={{
        lat: 22.5726,
        lng: 88.3639
      }}
      center={{
        lat:this.props.longitude,
        lng:this.props.latitude
      }}
      >

        <Marker onClick={this.onMarkerClick}
                name={'Current location'} />

        <InfoWindow onClose={this.onInfoWindowClose}>
            <div>

            </div>
        </InfoWindow>
      </Map>

    );
  }
}

export default GoogleApiWrapper({
  apiKey: ("my api key")
})(MapContainer)

Answer 1

在您的{data.adv_events.data.map((event, i) => (i < 4 && ... ))}类中，您需要根据从外部传递给该组件的props定义其初始状态，并为其设置默认值。由于我没有Google API密钥，因此我将在Leaflet中演示您的示例，但是我相信您会明白的。

MapcContainer

如何将数据从一个组件传递到另一组件

1 个答案: