0

「react-google-maps」を使用しています

私のページにはいくつかのチェックボックスと 1 つの GoogleMap コンポーネントがあります。チェックボックスをクリックした後に反応状態を更新すると。GoogleMap がアンマウントされ、再度マウントされます。GoogleMap は、チェックボックスによって変更される状態を使用しません。しかし、GoogleMap はまだ再マウントされています。

最も奇妙なのは、GoogleMap がアンマウントされることです。GoogleMap を再レンダリングする必要があると思います。次にshouldComponentUpdate()、GoogleMap の再レンダリングを防ぐために使用できます。しかし、GoogleMap に関係のない状態で setState を設定すると、unmount がトリガーされます。

関数内で宣言GoogleMapDOMし、html では '' のように使用します。で宣言することが原因だと思います。確認してみるよ。renderGoogleMapDOMGoogleMapDOMrender

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 />
  )});

誰かが私を助けることができますか？ありがとう。

4

0 に答える 0