NextJS 13.4(App Router)中useEffect未触发问题求助

可能的原因及修复步骤 #

1. 先确认API路由是否正常工作 #

直接在浏览器地址栏访问http://localhost:3000/api/data，检查是否返回预期的JSON数据。同时确认API路由文件（app/api/data/route.ts或pages/api/data.ts）没有语法错误或逻辑问题。

2. 修复useEffect中的fetch请求 #

Next.js默认会缓存fetch请求结果，可能导致useEffect未触发新请求。添加缓存配置强制刷新，并增加错误处理：

useEffect(() => {
  fetch("/api/data", { cache: "no-store" })
    .then((res) => {
      if (!res.ok) throw new Error("请求失败");
      return res.json();
    })
    .then((fetchedData) => {
      setData(fetchedData);
      console.log("获取到数据:", fetchedData);
    })
    .catch((err) => console.error("数据获取失败:", err));
}, []);

3. 确保获取的数据被实际使用 #

你当前代码中虽然获取了data状态，但DataTable仍使用硬编码的rows数组，需要将接口数据传递给表格：

// 初始化状态为数组，避免null报错
const [data, setData] = useState<Record<string, string | number>[]>([]);

// ...

return (
  <>
    <Resizable
      style={{ border: "1px solid black" }}
      size={{ width: state.width, height: state.height }}
      onResizeStop={(e, direction, ref, d) => {
        setState({
          width: state.width + d.width,
          height: state.height + d.height,
        });
      }}
    >
      <DataTable
        headers={headers}
        rows={data.length > 0 ? data : rows} // 优先使用接口返回的数据
        caption="Bookings Details (pagination,sorting added)"
        sortable
        pagination
        colorScheme="teal"
      />
    </Resizable>
  </>
);

4. 强制组件动态渲染（可选） #

如果是App Router的静态渲染机制导致问题，可在page组件顶部添加指令强制动态渲染：

"use client";
export const dynamic = "force-dynamic";

5. 检查React Strict Mode影响 #

开发环境下React Strict Mode会让useEffect执行两次，属于正常现象。若因此引发API路由问题，可临时关闭next.config.js中的Strict Mode测试：

module.exports = {
  reactStrictMode: false,
};

额外优化：复用数据获取逻辑 #

可将数据提取逻辑封装到单独文件中，方便复用：

// utils/fetchData.ts
export async function fetchData() {
  const res = await fetch("/api/data", { cache: "no-store" });
  if (!res.ok) throw new Error("Failed to fetch data");
  return res.json();
}

在组件中调用：

useEffect(() => {
  const getData = async () => {
    try {
      const fetchedData = await fetchData();
      setData(fetchedData);
    } catch (err) {
      console.error(err);
    }
  };
  getData();
}, []);

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