0

我用来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
});

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

4

2 回答 2

1

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

于 2020-12-26T08:47:21.773 回答
0

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

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

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

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

参考 -

于 2021-08-07T08:47:27.670 回答