Twilio 从对话中删除监听器

Question

你好尝试制作一个基于 twilio 的对话应用程序

该应用程序运行良好，但每次有人从对话列表中单击对话时，它都会启动一个 useEffect，useEffect 类似于以下 function：

  const setChannelEvents = useCallback((channel) => {
    channel.on('messageAdded', (message) => {
      setMessages(prevMessages => [...message, prevMessages])
    })

问题是，每次我们离开对话时，听众都会继续，所以每次有人点击对话时，应用程序都会产生大量听众，这并不酷。

想知道如何在离开组件时关闭监听器

试过这样的事情：

  useEffect(() => {
    Twilio.getClient()
      .then((client) => client.getConversationBySid(channelId))
      .then((channel) => setChannelEvents(channel))
      .catch((err) => console.log('err', err.message))
      .finally(() => setLoading(''))
    
      return () => chatClientChannel.current.removeListener('messageAdded')
  }, [channelId, setChannelEvents])

没用

任何帮助将不胜感激，谢谢:)

Answer 1

Twilio 开发者布道师在这里。

我认为您的useEffect大部分是正确的，但您可能在返回原始频道的子句中使用了不同的 object。 像useEffect这样的 React hook 的美妙之处在于你可以将 state 中的一些封装在 function 中，然后在拆卸时使用它。

试试这个：

  const handleMessageAdded = (message) => {
    // do something with the new message
  }

  useEffect(() => {
    let currentChannel;
    Twilio.getClient()
      .then((client) => client.getConversationBySid(channelId))
      .then((channel) => {
        currentChannel = channel;
        return setChannelEvents(channel);
      })
      .catch((err) => console.log('err', err.message))
      .finally(() => setLoading(''))
    
      return () => { 
        if (currentChannel) {
          currentChannel.removeListener('messageAdded', handleMessageAdded);
        }
      };
  }, [channelId, setChannelEvents]);

在这里你设置currentChannel （我使用let来定义变量，然后在 promise 解析后更新它。你也可以通过将你的 promise 链分解为设置currentChannel的await ed函数来做到这一点）在useEffect function 中，然后从拆解 function 中的同一个 object 中删除监听器。