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

Question

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

我在useEffect中这样配置：

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

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

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

    });
  }, []);

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

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

如何在此回调中访问新的更新状态？提前致谢

Answer 1

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

Answer 2

我在同一个问题上卡了好久。我最终解决这个问题的方法是存储通道并在每次状态（我想在绑定回调中访问）发生变化时重新绑定事件。这是一个代码片段，可以帮助您更好地理解。

非常重要 - 不要忘记在重新绑定事件之前将事件与频道解除绑定。由于重新绑定而不解除绑定，先前的绑定只会为事件创建额外的侦听器，并且所有侦听器都会在事件发生时触发，这将是一团糟。学到了很多东西:")

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

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]);

参考-

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

Outdated react state in pusher .bind method

reactjs

state

pusher

pusher-js