Supabase JavaScript实时订阅中useState状态不同步问题排查

当在订阅上下文外部调用callFunc时，所有条目都能正常打印；但通过Supabase的postgres_changes订阅监听新Task插入事件时，虽然callFunc会被触发，却只打印应用启动时的空items状态。

复现代码 #

const receivedEvent = (payload: any) => {
  console.log(payload);
  callFunc();
};

const callFunc = () => {
  console.log(items);
};

useEffect(() => {
  const subscription = supabase
    .channel("Task")
    .on(
      "postgres_changes",
      { event: "INSERT", schema: "public", table: "Task" },
      receivedEvent
    )
    .subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, []);

原因解析 #

这是闭包陷阱导致的：
你的useEffect依赖数组为空，订阅仅在组件挂载时创建一次。此时receivedEvent和callFunc捕获的是组件初始化时的items状态（空值）。后续组件重新渲染、items更新时，已创建的订阅回调仍然持有旧的items引用，无法获取最新状态。

解决方案 #

方案1：给useEffect添加依赖（简单但易重复订阅）

将items加入useEffect的依赖数组，每次items更新时重新创建订阅：

useEffect(() => {
  const subscription = supabase
    .channel("Task")
    .on(
      "postgres_changes",
      { event: "INSERT", schema: "public", table: "Task" },
      receivedEvent
    )
    .subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [items]); // 添加items到依赖列表

方案2：使用useRef保存最新状态（高效推荐）

用useRef存储items的最新引用，回调中直接访问ref.current获取最新值：

const itemsRef = useRef(items);

// 同步items状态到ref
useEffect(() => {
  itemsRef.current = items;
}, [items]);

const callFunc = () => {
  console.log(itemsRef.current); // 访问最新状态
};

方案3：利用订阅payload直接更新状态

如果items是状态变量，可以直接用订阅返回的新数据更新items，确保状态与数据库同步：

const receivedEvent = (payload: any) => {
  console.log(payload);
  // 将新插入的Task添加到items状态
  setItems(prevItems => [...prevItems, payload.new]);
  callFunc(); // 此时items已更新，能打印最新内容
};

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