React项目输入框无法修改coords生成点位且addMarker2未定义如何解决？

问题1：输入值无法更新坐标生成点位 #

• 核心原因是React的state更新是异步操作，调用setLatitude2/setLongitude2后，立即读取的latitude2/longitude2仍然是更新前的旧值，要么判断条件不生效，要么传入addMarker2的是错误的旧坐标。
• 解决方法：把点位添加逻辑放到useEffect中，监听两个坐标state的变化，等两个值都有效时再执行点位创建，避免异步问题。

问题2：addMarker2未定义报错 #

• 核心原因是函数声明的作用域问题，你当前的代码大概率是把addMarker2声明在了组件return语句之后，或者语法错误导致函数声明未生效：你贴出的代码中addMarker2闭合大括号后直接写了recalculateRoutes()，要确认该语句没有破坏函数的作用域结构。
• 解决方法：把addMarker2函数统一移到组件return语句之前，确保JSX绑定事件时函数已经完成声明。

优化后可运行代码示例 #

import { useState, useEffect } from 'react'

// 你的组件内部逻辑
const YourComponent = () => {
  const [latitude2, setLatitude2] = useState(null)
  const [longitude2, setLongitude2] = useState(null)
  // 提前声明addMarker2
  const addMarker2 = (lat, lng) => {
    const element = document.createElement('div')
    element.className = 'marker'
    new tt.Marker({
      element: element,
    })
      .setLngLat([lng, lat])
      .addTo(map)    
  }

  // 监听坐标变化自动创建点位
  useEffect(() => {
    if(latitude2 && longitude2) {
      addMarker2(latitude2, longitude2)
      recalculateRoutes()
    }
  }, [latitude2, longitude2])

  // 渲染部分
  return (
    <div className="search">
      <input 
        type="text" 
        className="lat"
        id="lat"
        placeholder="Latitud segundo punto"
        onChange = {(e) => setLatitude2(e.target.value)}
      />
      <input 
        type="text" 
        className="long"
        id="long"
        placeholder="Longitud segundo punto"
        onChange = {(e) => setLongitude2(e.target.value)}
      />
    </div>
  )
}

额外优化提示 #

如果需要避免同一个坐标重复生成多个点位，可以额外用state存储已创建的marker实例，每次生成新点位前先把旧实例从地图上移除。

内容的提问来源于stack exchange，提问作者this is not me