如何在SWR获取到有效数据时仅执行一次操作（useEffect实现）

这里提供两种可靠的方式实现「SWR获取到有效数据时仅执行一次操作」的需求：

方法一：使用useRef标记执行状态 + useEffect #

通过useRef存储是否已执行的标记，结合依赖data的useEffect，仅在data有效且未执行过操作时触发逻辑：

import { useSWR } from 'swr';
import { useEffect, useRef } from 'react';

// 假设你的fetcher函数定义如下
const fetcher = (url) => fetch(url).then(res => res.json());

const YourComponent = () => {
  const { data, isLoading, mutate } = useSWR(`${process.env.BACKEND_BASE_URL}/resource`, fetcher);
  // 标记是否已经执行过目标操作
  const hasRun = useRef(false);

  useEffect(() => {
    // 仅当data存在且未执行过操作时执行
    if (data && !hasRun.current) {
      // 这里替换成你需要执行一次的操作
      console.log('仅执行一次的操作:', data);
      // 标记为已执行，后续data变更不再触发
      hasRun.current = true;
    }
  }, [data]);

  return (
    <div>
      {isLoading ? '加载中...' : '数据加载完成'}
    </div>
  );
};

export default YourComponent;

方法二：利用SWR的onSuccess回调 #

SWR内置了请求成功后的回调onSuccess，结合useRef标记，同样可以实现仅执行一次的效果：

import { useSWR } from 'swr';
import { useRef } from 'react';

const fetcher = (url) => fetch(url).then(res => res.json());

const YourComponent = () => {
  const hasRun = useRef(false);

  const { data, isLoading, mutate } = useSWR(
    `${process.env.BACKEND_BASE_URL}/resource`,
    fetcher,
    {
      onSuccess: (fetchedData) => {
        if (!hasRun.current) {
          // 执行仅需一次的操作
          console.log('仅执行一次的操作:', fetchedData);
          hasRun.current = true;
        }
      }
    }
  );

  return (
    <div>
      {isLoading ? '加载中...' : '数据加载完成'}
    </div>
  );
};

export default YourComponent;

说明 #

• useRef的current属性不会触发组件重渲染，适合用来存储这种执行状态标记。
• 如果你的场景中永远不会触发mutate重新请求数据，方法二可以去掉useRef标记，直接在onSuccess里执行操作即可。

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