使用MERN栈开发运输管理系统时出现TypeError: Failed to fetch问题求助

问题原因 #

• 你的useEffect依赖数组中包含handleOwnership和handleAvailable两个函数，组件每次渲染时这两个函数都会被重新创建，导致useEffect判定依赖发生变化，不断重复执行fetchBus方法，发起大量重复请求。当请求数量超出后端处理能力或浏览器请求限制时，就会出现TypeError: Failed to fetch错误，且错误数量随循环次数指数级增长。
• 频繁的请求和状态更新会进一步触发组件重复渲染，形成恶性循环。

解决方案 #

1. 用useCallback缓存函数依赖
   将handleOwnership和handleAvailable用useCallback包裹，避免每次渲染重新创建函数，确保只有当它们的实际依赖变量变化时才更新：

   import { useCallback } from 'react';
   
   // 缓存handleOwnership函数
   const handleOwnership = useCallback(() => {
     // 原有函数逻辑
   }, [/* 这里填入handleOwnership实际依赖的变量 */]);
   
   // 缓存handleAvailable函数
   const handleAvailable = useCallback(() => {
     // 原有函数逻辑
   }, [/* 这里填入handleAvailable实际依赖的变量 */]);
   

2. 优化fetch请求稳定性

   • 给请求添加超时处理，避免请求长期挂起占用资源：

     const fetchBus = async () => {
       try {
         const controller = new AbortController();
         // 设置5秒超时，可根据实际调整
         const timeoutId = setTimeout(() => controller.abort(), 5000);
     
         const response = await fetch("/api/buses", { signal: controller.signal });
         clearTimeout(timeoutId);
     
         if (!response.ok) {
           throw new Error(`请求失败，状态码：${response.status}`);
         }
         const json = await response.json();
         dispatch({ type: "SET_BUS", payload: json });
       } catch (error) {
         // 忽略超时中止的错误，只处理其他请求异常
         if (error.name !== 'AbortError') {
           console.log(error);
         }
       }
     };
     

   • 检查后端/api/buses接口的并发处理能力，确保能正常处理合理数量的请求，必要时添加接口限流。

3. 清理不必要的依赖
   检查fetchBus函数内部是否实际用到了handleOwnership和handleAvailable，如果没有，直接将这两个函数从useEffect的依赖数组中移除，这样useEffect只会在组件挂载时执行一次请求。

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