如何在Category与Page状态变更时仅触发一次useEffect？

你的问题核心在于两个独立的useEffect互相触发，导致重复调用dispatch。可以通过合并逻辑、跟踪请求参数的方式一次性解决所有问题，具体实现如下：

1. 改用useSearchParams管理URL参数（推荐） #

直接操作query不够响应式，用React Router的useSearchParams可以更优雅地管理和监听URL参数变化：

import { useState, useEffect, useRef } from 'react';
import { useSearchParams, useDispatch } from 'react-redux';

const CardPage = () => {
  const [category, setCategory] = useState('All');
  const [searchParams, setSearchParams] = useSearchParams();
  const dispatch = useDispatch();

  // 从URL获取page，转为数字类型
  const page = Number(searchParams.get('page')) || 1;

  // 用useRef保存上一次的请求参数，避免重复调用
  const lastRequestParams = useRef(null);

  useEffect(() => {
    let targetPage = page;

    // 当分类变更时，强制重置页码为1
    if (lastRequestParams.current && lastRequestParams.current.category !== category) {
      targetPage = 1;
      // 直接更新URL参数，替代navigate
      setSearchParams({ category, page: targetPage });
    }

    // 构造当前请求的参数
    const currentParams = { category, page: targetPage };

    // 如果参数和上一次完全相同，跳过dispatch
    if (lastRequestParams.current 
        && JSON.stringify(lastRequestParams.current) === JSON.stringify(currentParams)) {
      return;
    }

    // 分发action获取数据
    dispatch(getCards(category, targetPage));

    // 更新上一次的参数记录
    lastRequestParams.current = currentParams;
  }, [dispatch, category, page, setSearchParams]);

  // 其他组件逻辑...
};

2. 关键逻辑说明 #

• 合并useEffect：不再分开监听category和page，而是在同一个effect里处理所有参数变化，避免两个effect互相触发。
• 分类变更自动重置页码：当category变化时，直接将page设为1并更新URL，无需额外调用navigate。
• 避免重复请求：用useRef记录上一次的请求参数，只有当参数真正变化时才调用dispatch，解决初始渲染和导航导致的重复调用问题。
• 响应式URL管理：useSearchParams会自动监听URL变化，确保page值始终和URL同步，无需手动解析query。

3. 为什么原来的代码会有问题？ #

• 初始渲染重复调用：两个useEffect的依赖在初始渲染时都满足触发条件，导致两次dispatch。
• 分类变更触发重复请求：第一个useEffect修改URL导致page变化，触发第二个useEffect，重复调用相同参数的dispatch。
• 参数不同步：直接用query.get('page')不是响应式的，URL变化时可能无法及时更新page值。

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