Question

我试图获取地理位置，设置状态，然后将其传递给子组件。问题是在地理位置设置为state之前，需要将状态作为props的组件进行渲染。我认为当状态发生变化时，React会重新渲染使用该状态的组件。

＆＃13;

class App extends Component {
	constructor(props) {
		super(props)
		this.state = {
			location: null,
			venues: [],
			markers: []
		}
		this.getCurrentLocation = this.getCurrentLocation.bind(this)
		this.setCurrentLocation = this.setCurrentLocation.bind(this)		
	}
  
        setCurrentLocation(currentLocation) {
		this.setState({location: currentLocation})    		
	}

	getCurrentLocation() {
		let self = this;	
		navigator.geolocation.getCurrentPosition(function(position) {					
			let updatedLocation = {
				lat: position.coords.latitude,
				lng: position.coords.longitude
			}
			self.setCurrentLocation(updatedLocation)			
		})
	}
  
        render() {
		const markers = [
			{
				location: {
					lat: this.state.location.lat,
					lng: this.state.location.lng
				}
			}
		]
		return (
			<div className="main-container">
				<h1>Render a Map</h1>
				<div className="inner-container">
					<div className="map">
						<Map center={this.state.location} markers={markers}/>
					</div>
					
				</div>
			</div>
		)
	}
}

＆＃13;

这是使用位置的组件

＆＃13;

class Map extends Component {
	constructor(props) {
		super(props)		
	}

	render() {		
		const mapContainer = <div className="map-container"></div>
		const markers = this.props.markers.map((marker, i) => {
			const place = {
				position: {
					lat: marker.location.lat,
					lng: marker.location.lng
				}
			}
			return <Marker key={i} {...place} />
		})
		return (
			<GoogleMapLoader
				containerElement={mapContainer}
				googleMapElement={
					<GoogleMap
						defaultZoom={15}
						defaultCenter={this.props.center}
						options={{streetViewController: false, mapTypeControl: false}}>
						{ markers }
					</GoogleMap>
				} />
		)
	}
}

＆＃13;

感谢您的帮助。

Answer 1

在获得数据之前，不要渲染孩子。

{this.state.location && <Map .../>}

话虽这么说，每当其道具改变时，Map组件都应该重新渲染，所以我会在React dev-tools中检查location状态确实在你预期的时候发生变化。

通过地理定位从父母到孩子的反应

1 个答案: