從 React Leaflet JS 中的外部下拉菜單設置和更新中心和縮放

Question

我正在嘗試編寫一個函數，該函數將根據使用地圖上方的下拉菜單更新的數據輸入立即重新定位和重新縮放我的傳單地圖。 目前，此功能只能間歇性地工作，並且只能根據先前選擇的數據重新定位。 我的代碼如下。

應用組件：

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 

Answer 1

好的，我認為您缺少zoom const displayPosition = useCallback(... dependencies 數組。