React-Redux Toolkit组件单次dispatch触发两次API调用求助

我使用React、React-Redux及Redux Toolkit开发的组件会发起两次API调用，而非预期的一次。已尝试修改useEffect依赖数组、调整请求头、排查代码库中的其他调用，甚至参考Stack Overflow相关方案都未解决。Redux DevTools显示两次API调用接连触发。

相关代码片段 #

1. 组件中的API调用逻辑：

useEffect(() => {
  dispatch(fetchPosts('hot', ''));
}, [dispatch]);

2. Redux Toolkit异步Thunk定义：

export const fetchPosts = createAsyncThunk(
  'wall/fetchPosts',
  async (type, query) => {
    const response = await Reddit.fetchPosts(type, query);
    const data = await response.json();
    return data;
  }
)

3. Reddit API封装函数：

const Reddit = {
  fetchPosts: (type, query) => {
    return fetch(`https://www.reddit.com/${type}.json`, {
      method: 'GET',
      mode: 'cors',
    })
  },
}

可能的原因及解决方案 #

• React Strict Mode 触发重复渲染
  开发环境下，React Strict Mode会刻意重复调用useEffect等生命周期函数，用于检测潜在代码问题。这是触发两次API调用的最常见原因。
  解决方式：检查根组件是否被<React.StrictMode>包裹，开发环境可暂时移除该组件验证；生产环境下Strict Mode不会触发重复调用，上线后无此问题。

• 组件被多次挂载
  排查组件是否在应用中被重复渲染：比如路由配置错误、父组件重复渲染导致子组件多次挂载、或在多个位置引入了该组件。可在组件的useEffect中添加console.log('组件挂载')，查看控制台是否打印两次，以此判断组件挂载次数。

• Thunk参数传递错误
  createAsyncThunk的回调函数仅接受一个payload参数，第二个参数是thunkAPI对象。当前调用fetchPosts('hot', '')会把两个参数合并为一个payload，可能引发潜在问题（虽不直接导致两次调用，但建议修正）：

  // 组件中修正调用方式
  dispatch(fetchPosts({ type: 'hot', query: '' }));
  // Thunk定义修正
  export const fetchPosts = createAsyncThunk(
    'wall/fetchPosts',
    async ({ type, query }) => {
      const response = await Reddit.fetchPosts(type, query);
      const data = await response.json();
      return data;
    }
  )
  

验证步骤 #

1. 先移除根组件的<React.StrictMode>，确认API调用是否变为一次；
2. 添加控制台日志，检查组件是否被挂载两次；
3. 排查路由及父组件逻辑，确保组件仅被渲染一次。

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