React无限循环导致状态冻结问题求助

问题场景 #

• 集成Cognito的React Amplify项目，访客模式下API调用完全正常
• 登录后仅页面初始加载时API能成功调用一次；手动触发API调用（比如selectedCountry更新）时，前端卡在await API.post()步骤——CloudWatch显示Lambda已执行完成，但前端未收到响应，后续任何状态更新操作都会导致页面彻底冻结
• 已确认根因是未捕获的无限重渲染导致事件循环阻塞

相关代码 #

组件内useEffect逻辑 #

useEffect(() => {
        const getArticlesOnceUE = async() => {
            console.log("Calling the API")
            var arts = await atlasAPI.getCountryNews(selectedCountry, null) // Lambda执行完成，但该行后代码未执行
            console.log("Getting Data from Response")
            var articleData = arts.data
            console.log("Sorting Articles")
            const sorted_arts_r = articleData.sort((a,b) => b.datetime-a.datetime)
            const seper_arts = seperateArticles(sorted_arts, 30)
            console.log(seper_arts)
            setArticles(seper_arts)
        }
    
        getArticlesOnceUE()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [selectedCountry]);

API调用函数 #

async function GetCountryNews(country) {
        try {
            const apiName = "AtlasAPI";
            const path = "/get-country-news/";

            const data = { 
                body: {
                    "country": country
                } 
            };

            console.log("Before POST") // 执行到此处
            const res = await API.post(apiName, path, data);
            console.log("After POST") // 未执行

            return res
        } catch(error) {
            console.log("Error calling API: ", error);
            return null;
        }
    }

核心排查分析 #

1. 无限重渲染的闭环逻辑：React组件状态更新触发重渲染，若重渲染过程中又触发了状态更新（或依赖项变化），会形成无限循环，阻塞事件循环，导致异步API的响应无法被处理。
2. 依赖项隐藏的问题：你禁用了exhaustive-deps规则，可能忽略了atlasAPI、seperateArticles等依赖项——如果这些函数/对象在每次组件渲染时都会生成新的引用，即使selectedCountry未变化，useEffect也会被重复触发。
3. 登录后的Auth状态干扰：Cognito登录后，Amplify会更新全局认证上下文，若你的组件订阅了Auth状态（如useAuthenticator），可能触发额外的重渲染，与现有useEffect逻辑形成冲突。

潜在解决方案 #

• 修复useEffect依赖项：
  移除eslint-disable-next-line react-hooks/exhaustive-deps注释，将所有用到的外部变量/函数加入依赖数组。如果seperateArticles是组件内定义的函数，用useCallback包裹以固定引用：

  const seperateArticles = useCallback((arts, limit) => {
    // 你的拆分逻辑
  }, []); // 根据实际情况添加依赖
  

  同理，若atlasAPI是组件内实例化的，也需确保其引用稳定。

• 拦截无限重渲染触发源：
  在useEffect内添加日志，打印selectedCountry和依赖项的变化，确认是否存在意外的依赖项更新。也可使用React.memo包裹组件，避免不必要的重渲染。

• 添加API超时与错误处理：
  为API调用添加超时逻辑，避免异步请求长时间阻塞页面，同时完善错误捕获：

  async function GetCountryNews(country) {
    try {
      const apiName = "AtlasAPI";
      const path = "/get-country-news/";
      const data = { body: { country } };
  
      // 10秒超时逻辑
      const timeout = new Promise((_, reject) => setTimeout(() => reject(new Error("API请求超时")), 10000));
      const res = await Promise.race([API.post(apiName, path, data), timeout]);
      console.log("After POST");
      return res;
    } catch (error) {
      console.error("API调用失败:", error);
      return null;
    }
  }
  

• 排查Auth状态与组件的交互：
  检查是否有订阅Auth状态的逻辑（如Auth.currentAuthenticatedUser的重复调用），若有，将其放在独立的useEffect中，并添加合适的依赖项，避免与业务逻辑的useEffect冲突。

• 验证API认证配置：
  登录后检查浏览器Network面板，确认API请求的认证头（如Authorization）是否正确，是否存在4xx/5xx状态码的静默错误——Lambda执行完成不代表前端能正常接收响应，可能存在认证拦截或CORS问题。

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