React中useEffect调用setState后渲染旧值问题求助

问题根源 #

1. setState是异步更新机制，在useEffect中调用setIp后立刻执行proceedInput，此时proceedInput依赖的ip仍是更新前的旧值，导致请求用了错误的IP地址。
2. storageData在组件顶层声明，每次组件渲染都会重新从localStorage读取，无法正确维护历史数据的累加。
3. 依赖state中的ipV4判断结果，但该值基于输入框内容更新，当直接调用proceedInput（比如切换历史记录或当前位置）时，ipV4可能还是旧值，导致ipV4Completed状态错误。

解决方案 #

1. 重构proceedInput，改为接受IP参数

摆脱对state中ip的依赖，直接传入目标IP，彻底规避异步更新的问题：

// 初始化savedData时一次性读取localStorage，避免重复读取
const [savedData, setSavedData] = useState(() => {
  return JSON.parse(localStorage.getItem("savedData")) || [];
});

const proceedInput = useCallback((targetIp) => {
  console.log('proceedInput called with ip:', targetIp);
  // 拼接请求URL，空IP时自动请求当前位置
  const baseUrl = `https://geo.ipify.org/api/v2/country,city?apiKey=${process.env.REACT_APP_KEY_APIFY}`;
  const requestUrl = targetIp ? `${baseUrl}&ipAddress=${targetIp}` : baseUrl;

  axios
    .get(requestUrl)
    .then((response) => {
      const { data } = response;
      // 更新IP查询结果状态
      setSavedIp(data.ip);
      setLocation(data.location);
      setMapLocation(data.location);
      setIsp(data.isp);

      // 函数式更新历史数据，确保拿到最新状态
      setSavedData(prev => {
        const ipExists = prev.some(item => item.ip === data.ip);
        if (!ipExists) {
          return [...prev, data];
        }
        return prev;
      });

      // 根据返回的IP判断协议类型，更新对应状态
      const isIPv4 = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/.test(data.ip);
      setIpV4(isIPv4);
      setIpV4Completed(isIPv4);

      // 同步更新输入框的IP显示
      setIp(targetIp);
    })
    .catch((error) => {
      console.error("Failed to fetch location data:", error);
    });
}, []);

2. 修改触发proceedInput的useEffect

直接传入目标IP，不再依赖setIp的异步更新：

// 当前位置触发逻辑
useEffect(() => {
  if (currentLocation) {
    proceedInput(""); // 传空字符串，让API返回当前设备的IP信息
  }
}, [currentLocation, proceedInput])

// 历史记录触发逻辑
useEffect(() => {
  if (historyLocation) {
    proceedInput(historyLocation.ip); // 直接传入历史记录的IP
  }
}, [historyLocation, proceedInput])

3. 用户输入逻辑适配（保留原有逻辑，仅补充按钮点击）

用户在输入框输入时，仍通过onInputChange更新ip状态，点击查询按钮时直接传入当前输入值：

// 按钮点击事件示例
const handleQueryClick = () => {
  proceedInput(ip);
};

额外优化建议 #

• 添加加载状态：新增isLoading状态，在proceedInput发起请求时设为true，请求完成后设为false，避免旧状态闪烁。
• 同步验证状态：当通过历史记录或当前位置更新IP时，调用validateInput同步输入框的验证状态，保持按钮可用性一致。

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