0

您好尝试制作基于 twilio 的对话应用程序

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

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

没用

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

4

1 回答 1

0

Twilio 开发人员布道者在这里。

我认为您useEffect的大部分内容是正确的，但是您可能在 return 子句中使用了与原始频道不同的对象。React 钩子之类的美妙之处useEffect在于，您可以在函数中封装一些状态，然后在拆解时使用它们。

试试这个：

  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 链分解为await设置 的 ed 函数来做到这一点currentChannel）useEffect，然后从中删除侦听器拆卸功能中的相同对象。

于 2022-02-26T03:10:22.303 回答