React Native中如何确保多个setState同步执行，避免重复API调用？

首先，你遇到的多次触发API的问题，和dateFromCalendar的计算耗时无关，核心原因是当前场景下React没有对这两个setState进行批量更新。

在React中，默认的批量更新仅在合成事件、React生命周期函数等React管控的场景下生效。如果这段代码是在原生DOM事件回调（比如你用到了nativeEvent）、setTimeout或其他异步回调里，React 18之前不会自动批量处理setState，会导致两次状态更新分别触发重渲染，进而让useEffect执行两次。React 18虽默认开启自动批量更新，但少数特殊场景下仍可能出现例外。

下面是几个靠谱的解决办法：

方法一：用flushSync强制批量更新（React 18+） #

通过flushSync把需要批量更新的setState包裹起来，强制React同步处理这些更新，确保只触发一次重渲染和useEffect：

import { flushSync } from 'react';

// ...
if (event.type === "set") {
  setShowCalendar(false);
  const dateFromCalendar = new Date(event.nativeEvent.timestamp).toISOString();
  setOrders([]);

  flushSync(() => {
    setCurrentPage(1);
    setMainfilters((prevFilters: mainFilterInterface) => ({
      ...prevFilters,
      orderDate: dateFromCalendar,
    }));
  });
}

方法二：合并关联状态 #

把currentPage和mainfilters合并成一个状态对象，这样只需要一次setState操作，自然只会触发一次useEffect：

// 初始化合并后的状态
const [filterState, setFilterState] = useState({
  currentPage: 1,
  mainfilters: initialMainFilters // 替换成你的初始过滤器值
});

// 更新逻辑
if (event.type === "set") {
  setShowCalendar(false);
  const dateFromCalendar = new Date(event.nativeEvent.timestamp).toISOString();
  setOrders([]);

  setFilterState(prev => ({
    ...prev,
    currentPage: 1,
    mainfilters: {
      ...prev.mainfilters,
      orderDate: dateFromCalendar
    }
  }));
}

// 修改useEffect的依赖为合并后的状态
useEffect(() => {
  fetchAllOrders(true);
}, [filterState]);

方法三：添加触发条件判断（兜底方案） #

如果上面两种方法不适用，你可以在useEffect里加判断，确保只有当两个状态都完成更新后才触发API。比如用useRef记录更新状态：

import { useRef } from 'react';

// ...
const isUpdating = useRef(false);

useEffect(() => {
  if (isUpdating.current) {
    isUpdating.current = false;
    fetchAllOrders(true);
    return;
  }
  // 第一次触发时标记为更新中
  isUpdating.current = true;
}, [mainfilters, currentPage]);

这种方法依赖状态更新顺序，不如前两种可靠，优先推荐前两个方案。

内容的提问来源于stack exchange，提问作者Amogh S V