Next.js中POST请求后用useSWR自动刷新数据的问题

问题核心是useSWR默认不会自动响应本地POST操作后的数据源变化，需要手动触发数据重新验证。以下是具体解决方案：

1. 在自定义Hook中返回SWR的mutate函数 #

修改useTCodes钩子，将SWR提供的mutate函数返回，用于后续手动触发数据刷新：

function useTCodes() {
  const fetcher = (...args) => fetch(...args).then((res) => res.json());

  // 解构出mutate函数
  const { data, error, isLoading, mutate } = useSWR('/api/tcodes', fetcher);

  return {
    data,
    isLoading,
    isError: error,
    mutate // 将mutate加入返回值
  }
}

2. 将mutate传递到AddDialog组件 #

在Home组件中获取mutate并传递给Toolbar，再由Toolbar传递到AddDialog（根据你的组件层级调整传递路径）：

export default function Home() {
  const { data, mutate } = useTCodes();

  return (
    <div>
      {/* 把mutate传给Toolbar */}
      <Toolbar data={data} mutate={mutate} />
      <div className={styles.tcodes_container}>
        <TCodesList data={data}/>
      </div>
    </div>
  );
};

3. 在添加成功后调用mutate刷新数据 #

修改addTCode方法，确保POST请求完成后调用mutate触发SWR重新获取数据：

// 改成异步函数，确保请求完成后再执行后续操作
const addTCode = async () => {
  try {
    await fetch('http://localhost:3000/api/tcodes', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        code: tCode,
        description: description,
        keywords: keywords
      })
    });
    // 触发SWR重新验证数据，更新列表
    await mutate();
    initState();
    closeDialog();
  } catch (err) {
    console.error('添加TCode失败:', err);
    // 可根据需求添加错误提示
  }
}

原理说明 #

useSWR的自动重新验证仅针对窗口聚焦、页面重新可见、定时轮询等场景，本地的POST操作不会触发默认的重新验证逻辑。通过手动调用mutate，可以强制SWR重新请求/api/tcodes接口，获取最新的JSON数据并更新组件。

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