我正在尝试在我的应用程序中运行 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, 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);
答案 0 :(得分:0)
useEffect
中的 MapContainer
的用途是什么? useEffect
用于功能组件,而您将类组件用于 MapContainer
。
如果您选择类组件没有特定原因,我会为所有组件使用功能组件。
请查看您的 ContentSection
组件,当您尝试在 onClick for handleWeekday
上使用 handleMonday
时调用了句柄函数 <Dropdown.Item>
并期望您没有输入不送。你可以试试:
<Dropdown.Item onClick={handleWeekday}>Monday</Dropdown.Item>
哪个应该以事件作为输入调用函数。