pusher .bind 方法中过时的反应状态

问题描述

我使用 pusher-js 从后端接收数据。

---

我在 useEffect 中这样配置它：

  useEffect(() => {
    const pusher = new Pusher('my_app_id',{
      cluster: 'us3',});

    const channel = pusher.subscribe('messages');

    channel.bind('send-message',(data) => {

    });
  },[]);

在.bind方法的回调中，我想访问react状态。问题是，如果它更新了，这个回调仍然是旧版本。

channel.bind('send-message',(data) => {
    // here is my outdated state
});

---

我怎样才能在这个回调中访问新的、更新的状态？ 提前致谢

解决方法

在 useEffect 的依赖项数组中使用另一个带有更新状态的 useEffect，一旦状态更新，useEffect 就会更新。被触发，您可以在其中访问更新的状态。

,

我被同样的问题困扰了很长时间。我最终解决这个问题的方法是存储通道并在每次状态（我想在绑定回调中访问）改变时重新绑定事件。这是一个代码片段，可帮助您更好地理解。

非常重要 - 在重新绑定之前不要忘记从频道解除绑定事件。因为在没有取消绑定之前的绑定的情况下重新绑定只会为事件创建额外的侦听器，并且所有侦听器都会在事件发生时触发，这将是一团糟。以艰难的方式学习它:")

不知道这是否是最好的方法，但对我有用。

const [pusherChannel,setPusherChannel] = useState(null);
const [data,setData] = useState(null);

// TRIGGERED ON MOUNT
useEffect(() => {
  const pusher = new Pusher(APP_KEY,{
    cluster: APP_CLUSTER
  });
  const channel = pusher.subscribe(CHANNEL_NAME);
  setPusherChannel(channel);
  // PREVIOUSLY
  // channel.bind(EVENT_NAME,(pusherData) => {
  //   ...
  //   Accessing "data" here would give the state used
  //   during binding the event
  //});
},[]);

// TRIGGERED ON CHANGE IN "data"
useEffect(() => {
  console.log("Updated data : ",data);
  if(pusherChannel && pusherChannel.bind){
    console.log("Unbinding Event");
    pusherChannel.unbind(EVENT_NAME);
    console.log("Rebinding Event");
    pusherChannel.bind(EVENT_NAME,(pusherData) => {
      // USE UPDATED "data" here
    }
  }
},[pusherChannel,data]);

参考 -

• Binding Events
• Unbinding Events