[英]Setting and updating state in React JS with Dropdown component from Material UI
[英]Setting and updating center and zoom from external dropdown menu in React Leaflet JS
我正在尝试编写一个函数,该函数将根据使用地图上方的下拉菜单更新的数据输入立即重新定位和重新缩放我的传单地图。 目前,此功能只能间歇性地工作,并且只能根据先前选择的数据重新定位。 我的代码如下。
应用组件:
import { React, Fragment, useState, useCallback, useEffect } from 'react'
import Header from './components/header'
import Control from './components/control'
import Map from './components/map'
import Data from './data/data'
function App() {
const [map, setMap] = useState()
// const [center, setCenter] = useState()
const [zoom, setZoom] = useState(8)
const [filter, setFilter] = useState('Show all')
const filterOptions = ['Show all', 'Test 1', 'Test 2']
let data = Data.filter((item) => item.group.includes(filter))
const recalcCenter = () => {
let long =
data.reduce((total, next) => total + next.coordinates.long, 0) /
data.length
let lat =
data.reduce((total, next) => total + next.coordinates.lat, 0) /
data.length
return [long, lat]
}
const displayPosition = useCallback(() => {
map.setView(recalcCenter(), zoom)
map.fitBounds(data.coordinates.getBounds())
}, [map, filter])
return (
<Fragment>
<Header />
<Control
onClick={displayPosition}
setFilter={setFilter}
filterOptions={filterOptions}
/>
<Map setMap={setMap} center={recalcCenter()} zoom={zoom} data={data} />
</Fragment>
)
}
export default App
控制组件:
import React from 'react'
import classes from './control.module.css'
const Control = (props) => {
const changeHandler = (event) => {
props.setFilter(event.target.value)
// props.onClick()
}
let optionItems = props.filterOptions.map((item) => (
<option key={item}>{item}</option>
))
return (
<div className={classes.control_container}>
<p>Choose an option:</p>
<select onChange={changeHandler}>{optionItems}</select>
<button onClick={props.onClick}>Reset</button>
</div>
)
}
export default Control
好的,我认为您缺少zoom
const displayPosition = useCallback(...
dependencies 数组。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.