Estoy tratando de escribir una función que se vuelva a centrar inmediatamente y vuelva a ampliar mi mapa de Folleto en función de una entrada de datos que se actualiza mediante un menú desplegable sobre el mapa. Actualmente, esta función solo funciona de forma intermitente y solo se vuelve a centrar en función de los datos de la selección anterior. Mi código está abajo.

Componente de la aplicación:

 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

Componente de control:

 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