React中点击地图获取lat、lng存入state报错如何解决

点击地图时可正常获取并打印lat、lng坐标值，但尝试将两个值存入state时触发报错，报错截图如下：

原问题代码：

const [userPickPos, setUserPickPos] = useState()
  const MapEvents = () => {
    useMapEvents({
      click(e) {
        const lat = e.latlng.lat;
        console.log(lat) // 打印正常
        const lng = e.latlng.lng;
        console.log(lng) // 打印正常

        setUserPickPos(lat, lng) // 此处触发报错

      },
    });
}

React 的useState返回的状态更新函数只接收1个入参，传入的第一个参数才会被设为新的状态值，后续传入的所有参数都会被直接忽略。
你当前代码里写的setUserPickPos(lat, lng)传了两个参数，只有lat会被存到state里，lng会被丢弃；加上你调用useState时没有设置初始值，userPickPos初始为undefined，后续如果尝试读取这个state的属性就会直接抛出报错。
要同时存储经纬度两个关联值，必须把二者封装成一个整体（对象/数组）再传给更新函数，不能分开传两个独立参数。

给state设置明确的初始值，调用更新函数时把经纬度封装为对象传入即可：

// 初始化state结构，避免后续读取undefined属性报错
const [userPickPos, setUserPickPos] = useState({ lat: null, lng: null })
const MapEvents = () => {
  useMapEvents({
    click(e) {
      const lat = e.latlng.lat;
      const lng = e.latlng.lng;
      console.log(lat, lng)

      // 封装为对象传入，setter仅接收一个参数
      setUserPickPos({ lat, lng })
    },
  });
}

后续读取坐标时，直接通过userPickPos.lat获取纬度、userPickPos.lng获取经度即可。

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