时间戳

首页 > 解决方案 > React 中的 Pusher 实现，丢失了上下文

reactjs - React 中的 Pusher 实现，丢失了上下文

问题描述

我正在做 Pusher 的基本实现，这是相关的部分：

const [messages, setMessages] = useState();

useEffect(() =>
{
    //Fetching the messages from the API
    fetchMessages().then(fetchedMessages => setMessages(fetchedMessages));

    //Subscribing to a Pusher event in case of new messages
    pusherChannel.bind(EVENT_MESSAGE_SENT, (data) => 
    {
        //Here, "messages" is empty, even when it has been filled by the API already
        setMessages([...messages, data.message]);
    });

}, []);

因此，我从 API 获取消息，然后通过 Pusher 监听新消息。

我遇到的问题是，在 的回调中pusherChannel.bind，变量messages是空的，即使它已经被 API 填充了。

也许回调发送messages（和整个回调函数）的副本而不是引用？无论如何，我不知道如何使用该回调处理更新消息。

我已经看到绑定方法可以采用第三个“上下文”参数，但我不知道如何在挂钩中实现它。

标签： reactjsreact-hookspusher

解决方案

试试这个代码。我已将一个 useEffect 拆分为两个，添加一个isInit在获取初始化消息数组后设置为 true 的变量，添加 useCallback。

const [messages, setMessages] = useState();
const [isInit, setIsInit] = useState(false);
const handleMessageSent = useCallback((data) => {
  setMessages(prevState => ([...prevState, data.message]));
}, []);

useEffect(() => {
  fetchMessages().then((fetchedMessages) => {
    setMessages(fetchedMessages);
  }).finally(() => {
    setIsInit(true);
  });
}, []);

useEffect(() => {
  if (!isInit) {
    return;
  }

  pusherChannel.bind(EVENT_MESSAGE_SENT, handleMessageSent);

  return () => {
    pusherChannel.unbind(EVENT_MESSAGE_SENT, handleMessageSent);
  };
}, [isInit, handleMessageSent]);

推荐阅读