Javascript 在react.js中多次触发socket.on事件

Javascript 在react.js中多次触发socket.on事件,javascript,reactjs,socket.io,Javascript,Reactjs,Socket.io,我正在从我的服务器端点发出套接字事件,并使用socket.on()在react.js客户端上侦听该事件,但我发现在发出事件时我的socket.on事件多次触发。我阅读了许多与堆栈溢出相关的问题,但没有成功 此处为相关代码: 服务器 currentUsers: async function (req, res, next) { try { let io = req.app.get("socketio") // get socketio instance

我正在从我的服务器端点发出套接字事件,并使用socket.on()在react.js客户端上侦听该事件,但我发现在发出事件时我的socket.on事件多次触发。我阅读了许多与堆栈溢出相关的问题,但没有成功

此处为相关代码:

服务器

 currentUsers: async function (req, res, next) {
      try {
          let io = req.app.get("socketio")  // get socketio instance
          const uoid = req.body.uoid;
          const uuid = req.body.uuid || req.decoded.uuid
          const beacon_name = req.body.beacon_name
          if (uuid !== undefined && beacon_name !== undefined && uoid !== undefined) {
              let find = await knex('current_users').where(knex.raw('uuid = ? and uoid = ?', [uuid, uoid])).catch((err) => { return Promise.reject(err) })
              if (find.length == 0) {
                  let result = await knex('current_users').insert({ uuid: uuid, uoid: req.body.uoid, beacon_name: beacon_name, created_at: helper.currentTimeStamp(), in_at: helper.currentTimeStamp(), in: 1,out: 0 }).catch((err) => { return Promise.reject(err) })
                  console.log('result', result)
                  let getResult = await knex('users').select('users.id', 'users.name', 'users.email','users.mobile_number', 'users.auth_type', 'users.uuid', 'users.role','current_users.beacon_name','current_users.id as ob_id','beacons_info.beacon_room','current_users.in_at','current_users.out_at').innerJoin('current_users', 'users.uuid', '=', 'current_users.uuid').innerJoin('outlets','outlets.id','=','current_users.uoid').innerJoin('beacons_info', 'beacons_info.name', '=', 'current_users.beacon_name').where(knex.raw('current_users.id = ?',result))
                     io.emit('in_users',getResult)
                     res.end()
                 }
          }
    } catch (err) {
         console.log("err =====>", err)
    }
}
客户

    import React from "react";
    import socket from "../../../../utils/socket.io"; // get socket
    import EventEmitter from 'events';
    class CurrentUsers extends React.Component {
       _isMounted = false;
       constructor(props) {
          super(props);
          this.outlet_id = sessionStorage.outlet_id ? sessionStorage.outlet_id : "";
          this.selecteId = null;
          this.in_users = [];
          this.state = {
             loading: true,
             data: [],
             editData: {
                name: "",
                date: "",
                room: ""
             }
          };
       }

       componentDidMount() {
          console.log("calling component did mount");
          this._isMounted = true;
          this.setState({ loading: true });
          socket.emit('request-current-users-list',this.outlet_id)
       }


      componentWillUnmount() {
          this._isMounted = false;
       }

      render() {

          socket.on('get-current-users-list',(data)=>{
             this.setState({ data: data,loading: false})
          })
          console.log(EventEmitter.listenerCount(socket, 'in_users'));

          socket.on('in_users', (data) => {
             console.log("=== in ===", data)
          })
        return (
    // template html code
    );
         }
        }

这里是socket.on(in_用户)事件多次触发

我想是因为这个原因。我认为您应该在构造函数调用中订阅并发出事件。否则,我认为您在每次组件渲染时都会完成订阅。不要在渲染函数中定义套接字侦听器。每次组件重新招标时,都将重新创建它们。将它们移动到构造函数或componentDidMount函数。