React google maps 不会重新渲染 onClick答案

【问题标题】：React google maps do not re-render onClickReact google maps 不会重新渲染 onClick
【发布时间】：2021-05-05 13:43:35
【问题描述】：

我正在尝试在我的应用程序中运行 google-map-react。这个想法是当我用谷歌地图打开页面时，它应该向我显示一个包含所有数据的热图。然后我有一个下拉列表，我可以在其中根据工作日选择数据。因此，例如，如果我选择星期一，谷歌地图应该重新渲染地图并只显示星期一的数据。地图在开始时正确渲染，但是当我单击下拉列表中的按钮时，它不会重新渲染。

这是一个错误还是我做错了什么？希望任何人都可以在这里指导我。

我在下面分享了我的代码。第一个代码显示了我传递给 Maps 组件的状态。第二个代码是地图组件。

第一个代码

import React, { useState, useEffect } from 'react'
import Map from '../map/Map'
import data from '../../assets/data/heatmapData'
import Scatter from "../scatter-plot/Scatter";
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';

import './content-section.css'

const ContentSection = () => {
  const [heatmapData, setHeatmapData] = useState(data);
  // useEffect(() => {
  //   handleWeekday()
  // }, [])

  const handleWeekday = (input) => 
  {
    console.log(input);
    const heatmapMondayData = [{ lat: 37.782551, lng: -122.44536800000003 },
    { lat: 37.782745, lng: -122.44458600000002 },
    { lat: 37.782842, lng: -122.44368800000001 },
    { lat: 37.782919, lng: -122.442815 }];

    setHeatmapData(heatmapMondayData ); 
  }

  return (
  <>
    <div className="container">
      <div className="header-text">This is a header</div>
      <Scatter />
      <Map center={{ lat: 37.775, lng: -122.434 }} zoom={13} positions={heatmapData} />
      <DropdownButton id="dropdown-basic-button" title="Dropdown button">
        <Dropdown.Item onClick={handleMonday}>Monday</Dropdown.Item>
 
      </DropdownButton>
    </div>
  </>
  )
}

export default ContentSection

第二个代码

import React, { Component } from "react";
import { Map, HeatMap, GoogleApiWrapper } from "google-maps-react";
import './map.css'

const gradient = [
    "rgba(0, 255, 255, 0)",
    "rgba(0, 255, 255, 1)",
    "rgba(0, 191, 255, 1)",
    "rgba(0, 127, 255, 1)",
    "rgba(0, 63, 255, 1)",
    "rgba(0, 0, 255, 1)",
    "rgba(0, 0, 223, 1)",
    "rgba(0, 0, 191, 1)",
    "rgba(0, 0, 159, 1)",
    "rgba(0, 0, 127, 1)",
    "rgba(63, 0, 91, 1)",
    "rgba(127, 0, 63, 1)",
    "rgba(191, 0, 31, 1)",
    "rgba(255, 0, 0, 1)"
  ];
  class MapContainer extends React.Component {
    render() {
      console.log(this.props)

      useEffect(() => {
        this.props.positions
      }, [])
      return (
            <div className="map-container">
                <Map
                google={this.props.google}
                zoom={this.props.zoom}
                initialCenter={this.props.center}
                >
                    <HeatMap
                    gradient={gradient}
                    positions={this.props.positions}
                    opacity={1}
                    radius={20}
                    />
          </Map>

          <div>{this.props.positions[0].lat}</div>

            </div>
      );
    }
  }
  
  export default GoogleApiWrapper({
    apiKey: "XXX",
    libraries: ["visualization"]
  })(MapContainer);

【问题讨论】：

标签： reactjs google-maps google-maps-react

【解决方案1】：

MapContainer 内部的useEffect 的用途是什么？ useEffect 用于功能组件，而您将类组件用于MapContainer。如果您选择类组件没有具体原因，我会为所有组件使用功能组件。

请查看您的 ContentSection 组件，当您尝试在 onClick 上为 handleMonday 使用 handleMonday 时调用了句柄函数 handleWeekday 并期望您没有发送的输入。你可以试试：

<Dropdown.Item onClick={handleWeekday}>Monday</Dropdown.Item>

应该以事件作为输入来调用函数。

【讨论】：

@Ali91 有帮助吗？