React Query：如何区分首次数据请求与筛选触发的请求

方法一：新增专门的状态变量 #

直接在组件里加个布尔状态isFirstLoad，初始值设为true。首次请求完成后（不管成功还是失败），把它改成false，后续筛选触发的请求不再修改这个变量。

判断逻辑：

• 当status === 'pending' && isFirstLoad：渲染首次加载的初始视图
• 当status === 'pending' && !isFirstLoad：渲染带头部内容+底部加载状态的视图

示例代码：

// 初始化状态
const [status, setStatus] = useState('idle');
const [isFirstLoad, setIsFirstLoad] = useState(true);

// 首次加载请求
useEffect(() => {
  const fetchInitialData = async () => {
    setStatus('pending');
    try {
      const res = await api.getInitialData();
      // 处理数据逻辑
      setStatus('success');
    } catch (err) {
      setStatus('error');
    } finally {
      setIsFirstLoad(false); // 请求结束后标记为非首次
    }
  };
  fetchInitialData();
}, []);

// 筛选触发的请求
const handleFilterSubmit = async (filters) => {
  setStatus('pending');
  try {
    const res = await api.getFilteredData(filters);
    // 更新数据逻辑
    setStatus('success');
  } catch (err) {
    setStatus('error');
  }
};

方法二：细化请求状态的取值 #

把原有的status状态扩展成更具体的取值，比如用'initial-pending'、'filter-pending'、'success'、'error'，直接通过不同状态值区分请求类型。

示例代码：

const [status, setStatus] = useState('idle');

// 首次加载请求
useEffect(() => {
  const fetchInitial = async () => {
    setStatus('initial-pending');
    try {
      const res = await api.getInitialData();
      // 处理数据逻辑
      setStatus('success');
    } catch (err) {
      setStatus('error');
    }
  };
  fetchInitial();
}, []);

// 筛选请求
const handleFilter = async (newFilters) => {
  setStatus('filter-pending');
  try {
    const res = await api.getFilteredData(newFilters);
    // 更新数据逻辑
    setStatus('success');
  } catch (err) {
    setStatus('error');
  }
};

// 视图渲染判断
if (status === 'initial-pending') {
  // 首次加载的初始视图
} else if (status === 'filter-pending') {
  // 显示头部内容 + 底部加载状态
}

方法三：结合已有数据的存在状态判断 #

如果首次请求前没有任何数据，而筛选请求是基于已有数据更新的，可以通过判断数据是否存在辅助区分：

• 当status === 'pending' && !data：说明是首次请求（还未获取到任何数据）
• 当status === 'pending' && data：说明是筛选后的请求（已有数据，正在更新）

注意：这里的data初始值要设为null或undefined，不能用空数组[]，避免和请求返回的空数据混淆。

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