Чтение массива состояний ReactJS

Question

У меня есть 2 файла Server.js и Servicedesk.js, я работаю с socket.io и ReactJS. Я хочу сравнить массив из Server.js (мой файл socket.io) с массивом из Servicedesk.js. В Servicedesk.js у меня есть следующий код:

class Servicedesk extends React.Component {
    constructor(props) {
        super(props);    

    this.state = {
       messages: [],
    };

    socket.on('updateRooms', function(combMessages) {
            console.log(combMessages.length);
            console.log(this.state.messages.length);

            let intersection = combMessages.filter(x => this.state.messages.includes(x));
            console.log(intersection);
    });
  }
}

А в Server.js:

let combMessages = [];

Я передаю combMessages в Servicedesk.js, но как я могу сравнить оба? Потому что я не могу сделать что-то вроде:

let intersection = combMessages.filter(x => this.state.messages.includes(x));

Потому что я получаю эту ошибку:

TypeError: undefined is not an object (evaluating 'this.state.messages')

Answer 1

В socket.on() ваш

 function(combMessages) { 
     console.log(combMessages.length); 
     console.log(this.state.messages.length); 
     let intersection = combMessages.filter(x => this.state.messages.includes(x)); 
     console.log(intersection); 

}

Не видит контекст вашего компонента.Итак, вы должны использовать arrow function (см. Документацию) , который будет привязывать контекст к вашей функции, например:

 socket.on('updateRooms',(combMessages) => {
     console.log(combMessages.length); 
     console.log(this.state.messages.length); 
     let intersection = combMessages.filter(x => this.state.messages.includes(x)); 
     console.log(intersection); 
 })