Setting and updating center and zoom from external dropdown menu in React Leaflet JS

Question

I'm trying write a function which will immediately recenter and rezoom my Leaflet map based on a data input which is updated using a dropdown menu above the map. Currently this feature only works intermittently and only ever recenters based on the data from the previous selection. My code is below.

App component:

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

Control component:

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 数组。