在我的理解水平上,React doc对我来说很不清楚。
我应该在这里使用什么循环方法而不是componentDidMount()?我希望此组件每次从state.selectedShopInfo
获得新状态时都会更新Google地图。
在我的应用中,用户点击了一些列表,每次点击此组件都会获得新数据。
我正在使用console.log(_.last(this.props.selectedShopInfo));
进行检查,它正在运行。
那么我应该使用什么样的React循环方法,所以每次 { selectedShopInfo: state.selectedShopInfo }
都会改变GoogleMap Component
也会改变?
import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
class GoogleMap extends Component {
componentDidMount() {
const lastSelectedShopInfo = _.last(this.props.selectedShopInfo);
if (lastSelectedShopInfo !== undefined) {
new google.maps.Map(this.refs.map, {
zoom: 20,
center: {
lat: Number(lastSelectedShopInfo.latitude),
lng: Number(lastSelectedShopInfo.longitude),
},
});
}
}
render() {
console.log(_.last(this.props.selectedShopInfo));
return (
<div>
<hr />
<div className="google-map" ref="map" />
<hr />
</div>
);
}
}
function mapStateToProps(state) {
return { selectedShopInfo: state.selectedShopInfo };
}
export default connect(mapStateToProps)(GoogleMap);
答案 0 :(得分:4)
只要props
或state
更改,您的组件就会重新呈现。这是React组件的默认行为。
所以你的组件会重新渲染,但componentWillMount
中的逻辑不会被多次应用。
要解决此问题,请将该逻辑移至单独的函数,并在componentDidMount()
和componentDidUpdate()
中调用该逻辑。像这样:
componentDidMount() {
this.mapsInit();
}
componentDidUpdate(prevProps) {
if (JSON.stringify(this.props) !== JSON.stringify(prevProps)) {
this.mapsInit();
}
}
mapsInit() {
const lastSelectedShopInfo = _.last(this.props.selectedShopInfo);
if (lastSelectedShopInfo !== undefined) {
new google.maps.Map(this.refs.map, {
zoom: 20,
center: {
lat: Number(lastSelectedShopInfo.latitude),
lng: Number(lastSelectedShopInfo.longitude),
},
});
}
}
}
答案 1 :(得分:0)
您最初应在componentDidMount
内渲染地图,并在componentWillReceiveProps
中更新地图。