问题描述
我正在尝试在我的应用程序中运行 google-map-react。 这个想法是当我用谷歌地图打开页面时,它应该向我显示一个包含所有数据的热图。然后我有一个下拉列表,我可以在其中根据工作日选择数据。例如,如果我选择星期一,谷歌地图应该重新渲染地图并只显示星期一的数据。地图在开始时已正确呈现,但当我单击下拉列表中的按钮时,它不会重新呈现。
这是一个错误还是我做错了什么?希望任何人都可以在这里指导我。
我在下面分享了我的代码。第一个代码显示了我传递给 Maps 组件的状态。第二个代码是 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,0)","rgba(0,1)",191,127,63,223,159,"rgba(63,91,"rgba(127,"rgba(191,31,"rgba(255,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);
解决方法
useEffect
中的 MapContainer
的用途是什么? useEffect
用于功能组件,而您将类组件用于 MapContainer
。
如果您选择类组件没有特定原因,我会为所有组件使用功能组件。
请查看您的 ContentSection
组件,当您尝试在 onClick for handleWeekday
上使用 handleMonday
时调用了句柄函数 <Dropdown.Item>
并期望您没有输入不送。你可以试试:
<Dropdown.Item onClick={handleWeekday}>Monday</Dropdown.Item>
哪个应该以事件作为输入调用函数。