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方法可以占用三分之一；上下文"；，参数，但我不知道如何在钩子中实现它。

Answer 1

试试这个代码。我已经将一个useEffect拆分为两个，添加一个变量isInit，在获取init消息数组后设置为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]);