reactjs - 传递 Prop 时，react-google-maps map 未更新，更新时标记落后一个位置

Question

我让 map 在加载时工作，但每当我传递 Prop 时， map 本身永远不会改变。

标记发生变化，但始终落后于应有的状态 1，显然是同步问题，但我不确定如何在组件中修复此问题。

class Map extends React.Component {
  state = {
     center: { lat: 50.937531, lng: 6.960278600000038 }
  }

  componentWillReceiveProps = () => {
    this.setState({
      center: { 
        lat: Number(parseFloat(this.props.city.lat)),
        lng: Number(parseFloat(this.props.city.lng))
      }
    });
  }

  render() {
    console.log(this.state.center)
    return (
      <div>
        <MapDetails
          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-L-IikkM6BZ_3Z2QIzbkx4pdAkP76tok&v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={<div style={{ height: `100vh`}} />}
          mapElement={<div style={{ height: `100%` }} />}
          mapCenter={this.state.center}
        />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return { city: state.CityNameReducer }
}

export default connect(mapStateToProps)(Map);

const MapDetails = withScriptjs(withGoogleMap(props =>
  <GoogleMap
    defaultZoom={12}
    defaultCenter={props.mapCenter}
  >
    <Marker
      position={props.mapCenter}
    />
  </GoogleMap>
));

我最大的问题是为什么 map 本身没有更新？

Answer 1

向 GoogleMap 组件添加一个键。每次提供的 key 都应该是唯一的。为了进行测试，请使用新的 Date().getTime() 函数。

<GoogleMap key={new Date().getTime()}/>

正如我提到的，它仅用于测试，因此请确保以更好的方式提供此 key