React中Supabase Realtime Subscribe无日志输出问题求助

我用React开发，想在Supabase的data表有新数据插入时，把最新数据打印到控制台，但现在控制台完全没输出。

我的代码如下：

import { supabase } from "../supabase";
import { useEffect } from "react";

const Realtime = () => {
  useEffect(() => {
  const taskListener = supabase
    .channel("public:data")
    .on(
      "postgres_changes",
      { event: "INSERT", schema: "public", table: "data" },
      (payload) => {
        console.log("Change received!", payload);
      }
    )
    .subscribe();

  taskListener.unsubscribe();
}, []);
return <h1>Realtime</h1>;
};

export default Realtime;

我第一次接触后端相关内容，对这些知识比较陌生，希望有人帮我解释为什么控制台没有输出，或者提供一些相关的学习资源。

补充信息：

• 仓库地址：https://github.com/CO2Sesnsor/breathe-front-end
• 手动提交数据的路由：http://localhost:3000/postdata
• 测试实时监听的路由：http://localhost:3000/realtime

问题原因及解决方法 #

1. 核心问题：订阅后立即取消订阅 #

你在useEffect里刚创建并订阅了频道，紧接着就调用taskListener.unsubscribe()，直接关闭了实时连接，自然接收不到任何事件推送。

修改方法：把取消订阅的逻辑放到useEffect的清理函数中，这样只有组件卸载时才会断开连接，组件挂载期间保持实时监听：

import { supabase } from "../supabase";
import { useEffect } from "react";

const Realtime = () => {
  useEffect(() => {
    const taskListener = supabase
      .channel("public:data")
      .on(
        "postgres_changes",
        { event: "INSERT", schema: "public", table: "data" },
        (payload) => {
          console.log("Change received!", payload);
        }
      )
      .subscribe();

    // 组件卸载时执行清理，取消订阅
    return () => taskListener.unsubscribe();
  }, []);
  return <h1>Realtime</h1>;
};

export default Realtime;

2. 额外检查项 #

• 确认Supabase控制台中data表的实时功能已开启：进入项目后台，找到对应表的「Realtime」标签，开启监听权限。
• 检查表权限：确保Supabase客户端使用的角色（默认是anon）拥有该表的SELECT和INSERT权限，否则无法接收实时事件。
• 排查频道命名冲突：可以尝试更换频道名称，比如realtime-data，避免潜在的命名问题。

入门学习资源 #

• Supabase官方实时数据库文档：重点看React集成部分，有完整的示例和步骤说明。
• React useEffect钩子教程：掌握清理函数的用法，这是处理订阅、定时器等副作用的关键。
• Supabase React快速入门：跟着官方教程从零搭建带实时功能的应用，快速熟悉整个流程。

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