React JS中Leaflet地图提交坐标后标记点不显示问题求助

我尝试用React JS和Leaflet创建地图，但输入经纬度点击提交后，标记点不会更新到指定位置。以下是原代码：

import React, { useState } from 'react';
import {
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  ZoomControl,
} from 'react-leaflet';
import { FullscreenControl } from 'react-leaflet-fullscreen';
import './MapComponent.css'; 
import 'leaflet/dist/leaflet.css';


const MapComponent=()=>{
 const [latitude, setLatitude] = useState('51.505');
  const [longitude, setLongitude] = useState('-0.09');
  const [position, setPosition] = useState([
    parseFloat(latitude),
    parseFloat(longitude),
  ]); 

const handleLatitudeChange = (e) => {
    setLatitude(e.target.value);
    setPosition([parseFloat(e.target.value), position[1]]);
  };

  const handleLongitudeChange = (e) => {
    setLongitude(e.target.value);
    setPosition([position[0], parseFloat(e.target.value)]);
  };

  const handleMapClick = (e) => {
    const { lat, lng } = e.target.value;
    setPosition([lat, lng]);
    setLatitude(lat.toString());
    setLongitude(lng.toString());
  };

  const handleClear = () => {
    setLatitude('');
    setLongitude('');
    setPosition([51.505, -0.09]); 
  };

const handleSubmit = () => {
      const lat = parseFloat(latitude);
      const lon = parseFloat(longitude);
         if (!isNaN(lat) && !isNaN(lon)) {
           setPosition([lat, lon]);
         }
    console.log(setPosition);
    console.log('Latitude:', latitude);
    console.log('Longitude:', longitude);
  };

  const clearInputs = () => {
    setLatitude('');
    setLongitude('');
  };

return (
 <div className="map-container">
      <MapContainer className="map" center={position} zoom={13} onClick={handleMapClick} zoomControl={false} fullscreenControl={true}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            Latitude: {latitude} <br />
            Longitude: {longitude}
          </Popup>
        </Marker>
        <ZoomControl position="bottomright" />
        <FullscreenControl position="topright" />
      </MapContainer>
      <div className="controls">
        <div>
          Latitude:
          <input type="text" value={latitude} onChange={handleLatitudeChange} />
        </div>
        <div>
          Longitude:
          <input type="text" value={longitude} onChange={handleLongitudeChange} />
        </div>
        <div>
          <button onClick={handleSubmit}>Submit</button>
          <button onClick={handleClear}>Clear</button>
        </div>
      </div>
    </div>
)
}

核心问题与修复要点 #

• 地图点击事件的经纬度获取错误：Leaflet地图点击事件的经纬度存在e.latlng对象中，原代码错误从e.target.value取值，导致点击地图时无法更新标记点。
• 输入框 onChange 逻辑的异步问题：直接依赖当前position state更新新值时，可能因React state异步更新特性导致旧值残留，改用函数式更新获取最新state。
• 无效的调试代码：console.log(setPosition)是打印状态更新函数，无实际意义，改为打印当前位置值。
• 初始state优化：position初始值无需依赖其他state，直接传入数值数组更直观。

修复后的完整代码 #

import React, { useState } from 'react';
import {
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  ZoomControl,
} from 'react-leaflet';
import { FullscreenControl } from 'react-leaflet-fullscreen';
import './MapComponent.css'; 
import 'leaflet/dist/leaflet.css';

const MapComponent=()=>{
  const [latitude, setLatitude] = useState('51.505');
  const [longitude, setLongitude] = useState('-0.09');
  // 直接设置初始位置，避免依赖其他state
  const [position, setPosition] = useState([51.505, -0.09]); 

  const handleLatitudeChange = (e) => {
    const newLat = e.target.value;
    setLatitude(newLat);
    // 函数式更新获取最新position状态
    setPosition(prev => [parseFloat(newLat) || prev[0], prev[1]]);
  };

  const handleLongitudeChange = (e) => {
    const newLng = e.target.value;
    setLongitude(newLng);
    setPosition(prev => [prev[0], parseFloat(newLng) || prev[1]]);
  };

  const handleMapClick = (e) => {
    // 从e.latlng中正确获取经纬度
    const { lat, lng } = e.latlng;
    setPosition([lat, lng]);
    setLatitude(lat.toString());
    setLongitude(lng.toString());
  };

  const handleClear = () => {
    setLatitude('');
    setLongitude('');
    setPosition([51.505, -0.09]); 
  };

  const handleSubmit = () => {
    const lat = parseFloat(latitude);
    const lon = parseFloat(longitude);
    if (!isNaN(lat) && !isNaN(lon)) {
      setPosition([lat, lon]);
    }
    // 打印当前位置而非更新函数
    console.log('Current Position:', position);
    console.log('Latitude:', latitude);
    console.log('Longitude:', longitude);
  };

  return (
    <div className="map-container">
      <MapContainer className="map" center={position} zoom={13} onClick={handleMapClick} zoomControl={false} fullscreenControl={true}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            Latitude: {latitude} <br />
            Longitude: {longitude}
          </Popup>
        </Marker>
        <ZoomControl position="bottomright" />
        <FullscreenControl position="topright" />
      </MapContainer>
      <div className="controls">
        <div>
          Latitude:
          <input type="text" value={latitude} onChange={handleLatitudeChange} />
        </div>
        <div>
          Longitude:
          <input type="text" value={longitude} onChange={handleLongitudeChange} />
        </div>
        <div>
          <button onClick={handleSubmit}>Submit</button>
          <button onClick={handleClear}>Clear</button>
        </div>
      </div>
    </div>
  )
}

export default MapComponent;

额外优化说明 #

• 输入无效数字时，会保留之前的位置，避免标记点消失。
• 点击地图任意位置，标记点会自动跳转并同步更新输入框内容。
• 移除了原代码中未使用的clearInputs函数。

内容的提问来源于stack exchange，提问作者Shiv