Socket.io в Reactjs

Question

Вот как я слушаю уведомления от socket.io в reactjs:

render(){
  var socket = io('http://localhost:8080');  
  socket.on(isAuthenticated().user._id, function(msg){
    toast.info(msg)
  });
  const {deal, supplier, buyer, info,user, shipment, payment} = this.state;
  return(
    ....
  )
}

Все работает нормально. Я вижу, что уведомление отправляется только один раз на стороне сервера, но оно отображается 6 раз на стороне клиента. Как мне его ограничить?

Answer 1

У вас не должно быть побочных эффектов, таких как io и socket.on() в вашем методе рендеринга. Для этого следует использовать componentDidMount. Он вызывается сразу после того, как компонент вставлен в DOM. См. эту ссылку для получения информации о componentDidMount и убедитесь, что вы добавили componentWillUnmount тоже, чтобы очистить любой прослушиватель событий, созданный в componentDidMount, так как он вызывается непосредственно перед удалением компонента из DOM. .

После инициализации прослушивателя событий сокета в componentDidMount с помощью метода on вам необходимо очистить прослушиватель событий в componentWillUnmount, вызвав метод off. socket наследует все методы из Emitter ( щелкните здесь для получения дополнительной информации ), который определяет метод off, который вам нужно использовать в componentWillUnmount.

Из документация :

Передайте event и fn, чтобы удалить слушателя. Передайте event, чтобы удалить всех слушателей этого события. Ничего не передавайте, чтобы удалить всех прослушивателей всех событий.

Итак, в вашем случае вы можете просто использовать socket.off() без параметров, чтобы удалить все прослушиватели сокетов. Или socket.off(isAuthenticated().user._id), чтобы удалить все прослушиватели событий для указанного c события.