Next.js中useEffect数据库更新后表格不刷新及无限循环问题求解

你将getData加入useEffect依赖数组时，effect内部执行的setData(data)会修改getData的状态值，触发依赖更新后再次执行effect，陷入「执行effect→更新getData→触发effect」的死循环，最终导致应用崩溃。

你当前用的5秒轮询属于兜底方案，性能和实时性都不佳，可根据业务场景选择更合适的实现：

方案1：操作后主动触发刷新（成本最低，适用90%以上场景） #

如果数据变更都是当前页面的用户操作触发的（比如提交新增/编辑表单、点击删除按钮），直接把数据请求逻辑封装为公共函数，操作成功后手动调用刷新即可，不需要依赖监听也不需要轮询：

const [getData, setData] = useState([]);

// 抽离公共请求逻辑
const fetchClientData = async () => {
  if (!localStorage.getItem("ACCESS_TOKEN")) {
    router.push("/login");
    return;
  }
  const api = new Api();
  const response = await api.getRequest(`${process.env.NEXT_API_URL}api/clients`);
  const data = response.data;
  dispatch(setUserData({ ...data }));
  setData(data);
}

// 首次加载仅执行一次
useEffect(() => {
  let mounted = true;
  if (mounted) {
    fetchClientData();
  }
  return () => (mounted = false);
}, []);

// 示例：新增数据操作成功后主动刷新列表
const handleAddRecord = async (formData) => {
  await api.postNewRecord(formData);
  // 操作成功后调用即可拿到最新数据
  await fetchClientData();
}

方案2：服务端主动推送（适用多端同步、其他用户修改数据的场景） #

如果数据可能被其他用户/其他端修改，当前页面用户无操作也需要同步更新，可接入WebSocket或者SSE（服务器发送事件），后端检测到数据库更新时主动给前端发通知，前端收到通知后再刷新数据：

useEffect(() => {
  // 建立SSE长连接
  const eventSource = new EventSource('/api/data-notify');
  eventSource.onmessage = (event) => {
    // 收到数据更新通知后再刷新
    if (event.data === 'client_data_updated') {
      fetchClientData();
    }
  };
  return () => eventSource.close();
}, []);

方案3：轮询优化（仅当后端不支持推送时使用） #

如果必须使用轮询，可增加数据对比逻辑，只有数据真实变更时才更新状态，减少不必要的重渲染：

api.getRequest(`${process.env.NEXT_API_URL}api/clients`)
  .then((response) => {
    const newData = response.data;
    // 深对比新旧数据，仅变更时更新状态
    if (JSON.stringify(newData) !== JSON.stringify(getData)) {
      dispatch(setUserData({ ...newData }));
      setData(newData);
    }
  });

如果数据结构复杂，可使用lodash.isDeepEqual替代JSON.stringify做对比，兼容性更强。

• 列表渲染的key不要用index，替换为record.id这类业务唯一值，避免列表数据变更时出现渲染异常
• 不要将需要在effect内部修改的状态值加入依赖数组，避免逻辑倒置导致的死循环问题

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