如何在 Tcpsocket 中使用箭头 function？

Question

handleCreate = (data) => {
    const { wifi } = this.state;
    this.setState({
        wifi: wifi.concat({ id: this.id++, ...data })
    })
}

componentDidMount(){
    this.handleCreate();
}

render(){
    
    const client = TcpSocket.createConnection({
        port: 80,
        host: '192.168.4.100',
        tls: false,
        interface: 'wifi',
        localAddress: '192.168.4.101',
    }, () => {
        client.write('APPSETTING WIFI START');
        
    });

    client.on('data', function(data) {
        //console.log('message was received', data);
        var strData="";
        let dataLen = data.length;
        for(var i=0; i<dataLen; i++){
            strData+=String.fromCharCode(data[i]);
            //console.log('message is', String.fromCharCode(data[i]));
        }
        console.log('message is', strData);
        
        this.handleCreate(strData)
        //client.end();
        //console.log('message is', data['data']);
        
    });

}

I want to save data from server into this.state dynaimycally. But, I got message in console => TypeError: this.handleCreate is not a function. (In 'this.handleCreate(strData)', 'this.handleCreate' is undefined)

Is there any way to solve this problem?

Answer 1

I assume this is within a class definition. If not what do you think this refers to?

Don't use arrow functions when defining class members, such as handleCreate . That does not work correctly.

In your event handler client.on you should use an arrow function because this will correctly capture this . In your current code this does not reference the object you expect. The actual value depends on how your event handler is called.

Answer 2

try client.on callback as arrow function instead a normal function callback.