状态更新后如何停止重新安装地图组件(react-google-maps)

时间:2018-08-28 01:46:35

标签: reactjs react-google-maps react-lifecycle

我使用“ react-google-maps”

我的页面中有一些复选框和一个GoogleMap组件。 单击复选框后更新反应状态时。 GoogleMap将卸载并再次安装。 GoogleMap不使用通过复选框更改的状态。但GoogleMap仍会重新安装。

最奇怪的是GoogleMap卸载了。我认为GoogleMap应该重新呈现。然后,我可以使用shouldComponentUpdate()来阻止GoogleMap重新渲染。但是当我将setState设置为与GoogleMap无关的状态时会触发卸载。

我在GoogleMapDOM函数中声明了render,并且在''之类的html中使用了GoogleMapDOM。我认为是由于在GoogleMapDOM声明了render造成的。我会检查出来的。

render function()的片段

const GoogleMapDOM = compose(
  withProps({
    googleMapURL: googleApiUrl,
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement:<div style={{ height: 600, width: 800 }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withStateHandlers(() => ({
    isInfoWindowOpen: [],
  }), {
    onToggleOpen: ({ isInfoWindowOpen }) => () => ({
      isInfoWindowOpen: !isInfoWindowOpen,
    })
  }),
  lifecycle({
    componentWillReceiveProps(nextProps) {
      console.log('componentWillReceiveProps')
    },
  }),
  withScriptjs,
  withGoogleMap
)((props) => {
  return (
  <GoogleMap>
    {/* The code is omitted */}
  <GoogleMap />
  )});

有人可以帮助我吗?谢谢。

0 个答案:

没有答案