如何用useState修改变量值？React+TypeScript定位存储异常排查

核心问题分析与解决 #

1. console.log输出为空的原因 #

setLatitude和setLongitude是异步更新状态的操作，在showPosition函数中刚调用完setState，当前闭包中的latitude和longitude还是更新前的旧值（初始空字符串），所以直接打印会显示为空。

解决方法：

• 直接打印position.coords中的原始值：

function showPosition(position: GeolocationPosition) {
  setLatitude(position.coords.latitude)
  setLongitude(position.coords.longitude)
  console.log(position.coords.longitude, position.coords.latitude) // 直接打印原始数据
}

• 或者通过useEffect监听状态变化，状态更新后再打印：

useEffect(() => {
  if (latitude && longitude) {
    console.log(longitude, latitude)
  }
}, [latitude, longitude])

2. 后端接口发送失败的问题 #

你的第一个useEffect没有设置依赖项，会导致组件每次渲染都重复发送请求；同时你定义的ipData、latitudeData、longitudeData是闭包捕获的初始状态值，永远不会更新，导致发送给后端的是空值。

解决方法：

• 直接使用state变量作为请求参数，并且添加正确的依赖项，确保只有当IP或位置变化时才发送请求：

useEffect(() => {
  // 确保IP、纬度、经度都有值再发送请求
  if (ip && latitude && longitude) {
    axios.post('some/endpoint', {
      latitude,
      longitude,
      user_ip: ip
    }).then(res => console.log(res)).catch(err => console.log(err))
  }
}, [ip, latitude, longitude]) // 依赖IP、纬度、经度的变化

完整代码优化方案 #

针对代码中的类型、内存泄漏、逻辑判断等问题，优化后的代码如下：

import { useState, useEffect } from "preact/hooks";
import axios from "axios";

export function useSendLocation() {
  // 纬度和经度应为number类型，而非string
  const [latitude, setLatitude] = useState<number | null>(null);
  const [longitude, setLongitude] = useState<number | null>(null);
  const [ip, setIP] = useState<string | null>(null);

  // 获取位置信息，使用正确的类型定义
  const getLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, handleLocationError);
    } else {
      console.log("浏览器不支持地理定位");
    }
  };

  // 处理位置获取成功，使用GeolocationPosition类型替代any
  const showPosition = (position: GeolocationPosition) => {
    const { latitude: lat, longitude: lng } = position.coords;
    setLatitude(lat);
    setLongitude(lng);
    // 直接打印原始数据，避免异步状态的问题
    console.log(lng, lat);
  };

  // 添加位置获取失败的错误处理
  const handleLocationError = (error: GeolocationPositionError) => {
    switch(error.code) {
      case error.PERMISSION_DENIED:
        console.log("用户拒绝了地理定位请求");
        break;
      case error.POSITION_UNAVAILABLE:
        console.log("位置信息不可用");
        break;
      case error.TIMEOUT:
        console.log("获取位置超时");
        break;
      default:
        console.log("未知错误");
    }
  };

  // 获取IP地址，修复判断逻辑
  const getData = async () => {
    try {
      const res = await axios.get("https://api.ipify.org/?format=json");
      const userIp = res.data.ip;
      setIP(userIp);
      if (!userIp) {
        alert('无法获取你的IP地址');
      }
    } catch (err) {
      console.log("获取IP失败:", err);
      alert('无法获取你的IP地址');
    }
  };

  // 监听IP和位置变化，发送请求到后端
  useEffect(() => {
    if (ip && latitude !== null && longitude !== null) {
      axios.post('some/endpoint', {
        latitude,
        longitude,
        user_ip: ip
      }).then(res => console.log("位置发送成功:", res))
        .catch(err => console.log("位置发送失败:", err));
    }
  }, [ip, latitude, longitude]);

  // 初始化获取IP和位置，同时清理定时器防止内存泄漏
  useEffect(() => {
    getData();
    // 每5秒获取一次位置
    const intervalId = setInterval(getLocation, 5000);
    
    // 组件卸载时清除定时器
    return () => clearInterval(intervalId);
  }, []);
}

额外优化点说明 #

• 类型规范：将纬度、经度定义为number | null，IP定义为string | null，使用GeolocationPosition和GeolocationPositionError替代any，符合TypeScript类型安全要求。
• 错误处理：添加了地理定位失败的错误处理逻辑，以及IP请求的异常捕获，提升代码健壮性。
• 内存泄漏防护：在useEffect中返回清理函数，清除定时器，避免组件卸载后定时器继续运行。
• 请求触发时机：只有当IP、纬度、经度都有有效值时才发送请求，避免无效请求。

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