React/Next组件中console.log多次打印问题求助

一、为什么会打印6次？ #

React严格模式在开发环境下会强制重复调用组件渲染、useEffect、dispatch等逻辑两次，目的是揪出副作用问题。但6次打印一般是叠加了这些情况：

• 组件初始渲染（严格模式下2次）
• Redux state更新触发的重渲染（严格模式下2次）
• 额外的state/props变化导致的重渲染（比如组件内部useState、父组件传了每次渲染都变的props，严格模式下再2次）
• 你看到asyncThunk的“Fetching”日志两次，就是严格模式的正常表现，生产环境会自动消失。

二、解决打印次数过多的调试技巧 #

• 给打印加过滤逻辑，避免重复输出：
  用useRef记录上一次的state值，只在值变化时打印，同时限定只在开发环境执行：

  import { useSelector, useDispatch } from 'react-redux';
  import { useRef, useEffect } from 'react';
  // 可以用lodash的isEqual，或者自己写浅比较函数
  import isEqual from 'lodash/isEqual';
  
  const ImageGallery = () => {
    const images = useSelector(state => state.images.data);
    const prevImages = useRef();
  
    useEffect(() => {
      if (process.env.NODE_ENV === 'development' && !isEqual(prevImages.current, images)) {
        console.log('Updated images:', images);
        prevImages.current = images;
      }
    }, [images]);
  
    // ...其他逻辑
    return <div></div>;
  };
  

• 排查不必要的重渲染：
  检查父组件是否每次渲染都传递新的匿名函数、新对象作为props；组件内部是否有不必要的useState更新，这些都会触发额外重渲染。

三、useEffect无法获取更新后的值？ #

大概率是这两个问题：

1. 依赖项没加全：useEffect的依赖数组里必须包含images，否则不会在state更新时触发：

   useEffect(() => {
     console.log('Latest images:', images);
   }, [images]); // 必须加images作为依赖
   

2. 闭包陷阱：如果useEffect里用到了其他外部变量，要么把它们加入依赖，要么用useRef保存最新值。比如：

   const countRef = useRef(count);
   countRef.current = count;
   
   useEffect(() => {
     setTimeout(() => {
       console.log('Latest count:', countRef.current);
     }, 1000);
   }, []);
   

四、Redux异步请求的最佳实践 #

1. 用Redux Toolkit规范异步逻辑：你的asyncThunk写法没问题，但要确保slice正确处理状态：

   import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
   
   export const fetchImages = createAsyncThunk(
     'images/fetchImages',
     async () => {
       const res = await fetch('https://your-image-api.com');
       return res.json();
     }
   );
   
   const imagesSlice = createSlice({
     name: 'images',
     initialState: {
       data: [],
       status: 'idle', // idle/loading/succeeded/failed
       error: null
     },
     extraReducers: (builder) => {
       builder
         .addCase(fetchImages.pending, (state) => {
           state.status = 'loading';
         })
         .addCase(fetchImages.fulfilled, (state, action) => {
           state.status = 'succeeded';
           state.data = action.payload;
         })
         .addCase(fetchImages.rejected, (state, action) => {
           state.status = 'failed';
           state.error = action.error.message;
         });
     }
   });
   
   export default imagesSlice.reducer;
   

2. 组件里只触发一次异步请求：用useEffect包裹dispatch，加状态判断避免重复请求：

   useEffect(() => {
     if (images.status === 'idle') {
       dispatch(fetchImages());
     }
   }, [dispatch, images.status]);
   

   严格模式下会触发两次，但Redux Toolkit的asyncThunk会自动取消重复请求，不会发两次API调用。
3. 生产环境关闭严格模式：在index.js里删掉<React.StrictMode>标签，生产环境下所有重复渲染、重复日志都会消失。

总结 #

• 严格模式的重复渲染是开发环境的调试机制，不用慌，生产环境会自动恢复正常。
• 调试时给打印加过滤逻辑，避免被重复输出干扰。
• 确保useEffect依赖项正确，避开闭包陷阱。
• 遵循Redux Toolkit的规范写法，管理好异步状态，减少不必要的重渲染。

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