React中useEffect重复执行求助：过滤条件变更时getData执行两次

云上老周

2026-8-3

解决React中Filter变更时getData重复执行的问题

问题原因

你当前的代码会导致两次getData()调用，核心原因是：

当filters变更时，第一个useEffect触发setPage(1)，导致page状态更新
第二个useEffect的依赖是[filters, page]，所以会因filters变更执行一次，又因page更新再执行一次，最终触发两次调用

解决方案

下面提供两种可行方案，帮你避免重复调用：

方案一：直接在Filter变更时传入page=1调用getData

去掉第一个useEffect，用useRef跟踪之前的filters状态，在同一个useEffect里处理两种场景：

import { useEffect, useRef } from 'react';

// ...

const prevFilters = useRef(filters);

useEffect(() => {
  if (prevFilters.current !== filters) {
    // Filter变更时，直接传入page=1调用接口，同时更新page状态
    prevFilters.current = filters;
    getData({ ...filters, page: 1 });
    setPage(1);
  } else {
    // Page变更时，使用当前page值调用接口
    getData({ ...filters, page });
  }
}, [filters, page, getData]);

方案二：用标记区分Filter触发的Page变更

使用useRef标记是否是Filter导致的Page更新，避免重复执行：

import { useEffect, useRef } from 'react';

// ...

const isFilterTriggered = useRef(false);

// Filter变更时标记并重置page
useEffect(() => {
  isFilterTriggered.current = true;
  setPage(1);
}, [filters]);

// 根据标记执行getData，避免重复调用
useEffect(() => {
  getData();
  // 如果是Filter触发的调用，执行后重置标记
  if (isFilterTriggered.current) {
    isFilterTriggered.current = false;
  }
}, [page, getData]);