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方法的回调中，我希望访问react状态。问题是，如果它被更新了，这个回调仍然有旧版本。

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

​

参考资料-

• 绑定事件
• 非绑定事件