React中Axios获取Mongo数据时多次渲染问题排查与解决

可能的原因 #

• useEffect依赖配置错误：如果你的useEffect没指定依赖数组，或者依赖数组里包含了频繁变化的内容（比如每次渲染都会重建的函数、对象），会导致组件每次重渲染都触发请求，进而多次更新teams状态，控制台就会多次打印。
• React Strict Mode的开发环境特性：开发模式下，React Strict Mode会刻意让组件和useEffect执行两次，用来检测潜在的副作用问题。这会直接导致请求触发两次，状态也会被更新两次，所以你会看到多次打印。
• 缺少请求取消机制：如果组件在请求未完成时发生重渲染，旧请求完成后依然会更新状态，造成重复的状态更新和打印。

修复步骤 #

1. 修正useEffect的依赖数组
   如果你只需要在组件挂载时请求一次数据，给useEffect加上空的依赖数组：

   const [teams, setTeams] = useState([]);
   
   useEffect(() => {
     const fetchTeams = async () => {
       try {
         const res = await axios.get('/api/getTeam/data');
         setTeams(res.data);
       } catch (err) {
         console.error('请求失败:', err);
       }
     };
     fetchTeams();
   }, []); // 空依赖数组确保只在挂载时执行一次
   

   如果需要添加其他依赖，确保这些值是稳定的（比如用useCallback包裹函数、useMemo处理对象）。

2. 处理Strict Mode的双重渲染
   这是开发环境的正常行为，生产环境会自动消失。如果不想在开发时看到两次请求，可以暂时移除index.js里的<StrictMode>包裹，但更推荐确保请求是幂等的（多次请求不会导致数据异常）。

3. 添加请求取消机制
   使用AbortController在组件卸载或useEffect重新执行时取消未完成的请求，避免无效的状态更新：

   useEffect(() => {
     const controller = new AbortController();
     const signal = controller.signal;
   
     const fetchTeams = async () => {
       try {
         const res = await axios.get('/api/getTeam/data', { signal });
         setTeams(res.data);
       } catch (err) {
         if (err.name !== 'CanceledError') {
           console.error('请求失败:', err);
         }
       }
     };
     fetchTeams();
   
     // 组件卸载或useEffect重新执行时取消请求
     return () => controller.abort();
   }, []);
   

4. 优化状态打印逻辑
   如果你是在组件顶层直接打印teams，每次状态更新组件重渲染都会触发打印。如果只是调试需求，可以把打印放在监听teams变化的useEffect里：

   useEffect(() => {
     console.log('teams状态更新:', teams);
   }, [teams]);
   

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