React页面刷新或切换时getRoModul函数失效，热更新时正常

核心问题原因 #

1. useEffect依赖缺失：getRoModul函数未被加入useEffect的依赖数组中。组件刷新或页面切换时，函数引用会重新生成，但useEffect因未监听该函数的变化，不会触发重新执行；而开发热更新时，函数引用可能被缓存，从而意外触发执行。
2. 异步写法混乱：混合使用await和.then()，容易导致异步流程逻辑混乱，增加调试难度。
3. setState异步特性误导：setModels后直接console.log(models)无法获取最新值（React setState是异步操作），会干扰问题排查。

修复代码 #

import { useCallback, useEffect, useState } from 'react';
import axios from 'axios';

// 假设这里有你的状态定义：const [models, setModels] = useState([]); 等

// 用useCallback包裹，确保函数引用稳定
const getRoModul = useCallback(async () => {
  try {
    const url = "http://localhost:9001/roModels";
    const response = await axios.get(url);
    setModels(response.data.response);
    // 直接打印接口返回值，避免setState异步导致的调试误差
    console.log(response.data.response);
  } catch (error) {
    console.log('获取RoModul失败:', error.message);
  }
}, []); // 无外部依赖，空数组即可

const getSingleCustomer = useCallback(async (id) => {
  try {
    const url = `http://localhost:9001/singlecustomer/${id}`;
    const resp = await fetch(url);
    const data = await resp.json();
    if (data.status === 200) {
      const customer = data.response[0];
      setName(customer.name);
      setEmail(customer.email);
      setPhone(customer.phone);
      setAddress(customer.address);
      setRoModel(customer.romodel);
    }
  } catch (error) {
    console.log('获取单个客户失败:', error);
  }
}, []);

useEffect(() => {
  if (id) {
    getSingleCustomer(id);
  }
  getRoModul();
}, [id, getSingleCustomer, getRoModul]); // 加入所有用到的函数作为依赖

关键修改说明 #

• useCallback包裹异步函数：确保组件重新渲染时，函数引用不会频繁变化，只有当依赖项更新时才重新生成函数。
• 统一异步写法：用try/catch替代.then()/.catch()，让异步逻辑更清晰，避免混合写法导致的流程混乱。
• 完善useEffect依赖：将getRoModul和getSingleCustomer加入依赖数组，确保函数变化或id更新时，useEffect能正确触发执行。
• 修正调试逻辑：直接打印接口返回值，规避setState异步特性带来的调试误差。

额外排查点 #

1. 刷新页面时查看浏览器Network标签，确认getRoModul的请求是否正常发送、响应是否符合预期。
2. 检查models的初始值（如[]）是否能让组件在数据加载前正常渲染，避免因初始值问题导致UI异常。

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