React Hooks, useEffect - размонтирование проблемы с компонентом - PullRequest
Новая
       53

React Hooks, useEffect - размонтирование проблемы с компонентом

0 голосов
/ 21 февраля 2020

Добрый день, четверг, у меня следующий код: 

  const Variables = (props) => {

  const { activeVariable, mqttClient, updateRealTime } = props
  const [live] = useState(true)

  useEffect(() => {
    if (live && mqttClient) {

      // HERE I SUBSCRIBE TO TOPIC
      mqttClient.subscribe('variables_realtime')
      mqttClient.on('message', (topic, data) => {
        if (topic === 'variables_realtime') {
          const newData = JSON.parse(data.toString())
          console.log(topic, newData)
          updateRealTime(newData)
        }
      })
    }
    else mqttClient.unsubscribe('variables_realtime')

  }, [mqttClient, updateRealTime, live])

  useEffect(() => {
    return () => {
      // HERE I WANT TO UNSUBSCRIBE WHEN THE COMPONENT UNMOUNT 
      mqttClient.unsubscribe('variables_realtime')
    }
  }, [mqttClient])

  return (...)
}

Так что моя проблема в том, что когда я перехожу на другой маршрут реакции-роутер-дом, происходит ОТСУТСТВИЕ ПОДПИСКИ, но когда я возвращаюсь на этот маршрут, подписка происходит дважды ... Я не знаю, почему

Может быть, мне нужно использовать старый способ реакции с didMount, willUnmount, et c.?

Ответы [ 2 ]

0 голосов
/ 21 февраля 2020

Извините, друзья, проблема здесь заключалась в реализации с redux ... Поэтому мне нужно передать файлы mqtt.subscriptions и mqtt.on('message', (...) => {}) в мои действия и редукторы файлов redux. Спасибо!

0 голосов
/ 21 февраля 2020

Я полагаю, что вашему первому эффекту нужно вернуть функцию unub. Вы не должны иметь два эффекта afaik. React будет автоматически отменять отправку и повторную отправку по мере необходимости, поскольку ссылки на эти [mqttClient, updateRealTime, live] изменяются. 

useEffect(() => {
    if (live && mqttClient) {
      // HERE I SUBSCRIBE TO TOPIC
      mqttClient.subscribe('variables_realtime')
      mqttClient.on('message', (topic, data) => {
        if (topic === 'variables_realtime') {
          const newData = JSON.parse(data.toString())
          console.log(topic, newData)
          updateRealTime(newData)
        }
      })
    }

    return () => {
      // HERE I WANT TO UNSUBSCRIBE WHEN THE COMPONENT UNMOUNT 
      mqttClient.unsubscribe('variables_realtime')
    }

  }, [mqttClient, updateRealTime, live])
...