Одно и то же событие, генерируемое несколько раз в socket.io-client responsejs

Question

Я создаю приложение чата в react, expressjs и socket.io.Когда я нажимаю кнопку «Отправить», я отправляю событие и прослушиваю это событие на стороне сервера, а затем снова отправляю другое событие со стороны сервера и прослушиваю это событие на стороне клиента.И я написал код прослушивания событий на componentDidMount.Но не знаю, почему моя клиентская сторона вызывает одно и то же событие несколько раз.Ниже мой код обеих сторон:

Клиентская сторона

var socketIOClient = require('socket.io-client')('http://localhost:4001');

sendMessageClicked(e) {
    e.preventDefault();
    let message = this.state.originalMessage;

    var data = {
        message: message,
        time: Date.now()
    }

    socketIOClient.emit('send_message',data);
}

componentDidMount() {
    socketIOClient.on('msg',function(result){
        let messageHtml = 'messages working!';
        let messageBox = document.getElementById('messageBox');

        if (messageBox ) {
            messageBox.appendChild(messageHtml);
        }
    })
}

render(){
    return(
        <div>
            <form onSubmit={this.sendMessageClicked}>
                <textarea onChange={this.handleMessageChange} name="originalMessage" value={this.state.originalMessage}></textarea>
                <input type="submit" value="" />
            </form>
        </div>
    );
}

Серверная сторона

const app = require('./app');

var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(4001);

io.on('connection',function(socket){
    socket.on('send_message',function(data){
        io.emit('msg',data);
    })
})

Может кто-нибудь пожалуйстапомочь с тем же?