反应本地绑定此未定义的功能

Question

I am trying to set state after socket on function but

componentWillMount() {
socket.on('foo', function(msg){
//alert(JSON.stringify(msg));
//this.setState({user:msg});
this.setState({veri:msg});
this.setState({initial:msg});

});

undefined is not a function (evaluating 'this.setState({ veri: msg })') index.android.js:95:14 emit index.js:133:25 onevent socket.js:270:15 onpacket socket.js:228:19 index.js:21:20 emit index.js:133:25 ondecoded manager.js:345:12 index.js:21:20 emit index.js:133:25 add index.js:241:16 ondata manager.js:335:19 index.js:21:20 emit index.js:133:25 onPacket socket.js:457:18 socket.js:274:18 emit index.js:133:25 onPacket transport.js:145:12 onData transport.js:137:16 onmessage websocket.js:147:16 dispatchEvent event-target.js:172:43 WebSocket.js:148:27 emit EventEmitter.js:182:12 __callFunction MessageQueue.js:250:47 MessageQueue.js:101:26 __guard MessageQueue.js:218:6 callFunctionReturnFlushedQueue MessageQueue.js:100:17

Answer 1

While it's not possible to tell conclusively from the small chunk of code you provided, it's likely that this inside of socket.on is referring to the socket, not React.

You could either try using an arrow function:

socket.on('foo', msg => {
    this.setState({veri:msg});
    this.setState({initial:msg});
});

You could also set this to something (like self ) before calling socket , then use self instead of this inside:

const self = this;
socket.on('foo', function(msg){
    this.setState({veri:msg});
    this.setState({initial:msg});
});

You could also define the function outside the handler, and bind it to this :

const handleFoo = (function(msg){
    this.setState({veri:msg});
    this.setState({initial:msg});
}).bind(this);

socket.on('foo', handleFoo);

All three of those are ways to keep this what you expect and not let it change inside of another context.