全局状态更新滞后引发重复API请求问题求助

你当前遇到的问题核心是：100个ComponentChild实例同步挂载时，全局isFetching状态的更新滞后于组件初始挂载的判断逻辑，导致所有组件都检测到isFetching=false，进而发起了100次重复请求。以下是几种可靠的解决方案：

方案1：将请求逻辑提升到父组件或全局初始化层 #

最直接的方式是只在父组件（或全局入口）发起一次请求，子组件仅负责渲染已获取的数据，从根源上避免多组件触发请求。

修改父组件代码：

function ComponentParent = () => {
  const fetchedData = useSelector((state) => selectFetchedData(state));
  const isGloballyFetching = useSelector((state) => selectIsFetching(state));
  const dispatch = useDispatch();

  useEffect(() => {
    if (!fetchedData && !isGloballyFetching) {
      dispatch('REQUEST_START');
      someRequest().then((data) => {
        dispatch({ type: 'REQUEST_END', payload: data });
      });
    }
  }, [fetchedData, isGloballyFetching, dispatch]);

  return (
      <div>
        {Array.from(Array(100).keys()).map((i) => (
            <ComponentChild key={i} />
        ))}
      </div>
  )
}

此时子组件可以简化，仅专注于消费全局数据，无需再处理请求逻辑。

方案2：在Redux层添加请求拦截逻辑 #

利用Redux的同步特性，在reducer中拦截重复的REQUEST_START动作——只有当当前isFetching为false时，才允许更新状态为true，否则直接忽略该动作。

修改你的reducer代码：

const initialState = {
  isFetching: false,
  fetchedData: null,
};

function yourReducer(state = initialState, action) {
  switch (action.type) {
    case 'REQUEST_START':
      // 仅当未在请求时，才更新状态
      if (state.isFetching) {
        return state;
      }
      return {
        ...state,
        isFetching: true,
      };
    case 'REQUEST_END':
      return {
        ...state,
        isFetching: false,
        fetchedData: action.payload,
      };
    default:
      return state;
  }
}

第一个子组件dispatch的REQUEST_START会立即将isFetching设为true，后续99个组件dispatch的同类型动作会被reducer直接忽略，彻底避免重复请求。

方案3：组件内添加本地请求标记（补充方案） #

如果不想修改父组件或Redux逻辑，可以在子组件中用useRef存储本地的“已尝试请求”标记，结合全局状态做双重判断：

function ComponentChild = () => {
  const isGloballyFetching = useSelector((state) => selectIsFetching(state));
  const fetchedData = useSelector((state) => selectFetchedData(state));
  const dispatch = useDispatch();
  // 本地标记：记录当前组件是否已尝试发起请求
  const hasAttemptedFetch = useRef(false);

  useEffect(() => {
    if (fetchedData || isGloballyFetching || hasAttemptedFetch.current) return;
    
    // 标记当前组件已尝试请求
    hasAttemptedFetch.current = true;
    dispatch('REQUEST_START');
    someRequest().then((data) => {
      dispatch({ type: 'REQUEST_END', payload: data });
    });
  }, [fetchedData, isGloballyFetching, dispatch]);
}

这种方式能确保每个组件仅尝试一次请求，但极端情况下仍可能有少量重复请求，更适合作为辅助手段。

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