React 中的 Pusher 实现，丢失了上下文答案

【问题标题】：Pusher implementation in React, losing the contextReact 中的 Pusher 实现，丢失了上下文
【发布时间】：2020-11-23 03:49:41
【问题描述】：

我正在做一个 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 的副本（以及整个回调函数）而不是引用？无论如何，我不知道如何使用该回调处理更新消息。

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

【问题讨论】：

标签： reactjs react-hooks pusher

【解决方案1】：

试试这个代码。我已将一个 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]);

【讨论】：