React中的Pusher实现，丢失上下文。

Question

我正在进行一个基本的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 方法可以使用第三个参数 "context"，但我不知道如何在钩子中实现它。

- Gonzalo Bauer

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

- Kirill Skomarovskiy