在匿名函數內調用react函數

Question

我在這樣的反應組件中有一個函數

addItem: function(data) {
    console.log(data)
    var oldMessages = this.state.messages;
    oldMessages.push({id: data.uid, content: data});

    this.setState({messages: oldMessages});
    this.scrollAndSetTimestamps()
    this.updateCount()
  },
componentDidMount: function() {
this.loadLatestMessages();
var socket = new SockJS('http://127.0.0.1:8080/stomp');
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
  // subscribe to the /room.uid endpoint
  stompClient.subscribe("/room.1247016", function(data) {
      var message = data.body;
      console.log("Received: "+message);
      this.addItem();
  });
 });
},

事實證明，當消息到達時，找不到addItem 。 如何在anon函數中調用react方法？

Answer 1

最簡單的解決方案是在某個變量中存儲this上下文的正確引用：

var self = this;
stompClient.connect({}, function(frame) {
    stompClient.subscribe("/room.1247016", function(data) {
        var message = data.body;
        self.addItem();
    });
});

您也可以使用Function.prototype.bind ，但這不是很易讀：

stompClient.connect({}, function(frame) {
    stompClient.subscribe("/room.1247016", function(data) {
        var message = data.body;
        this.addItem();
    }.bind(this));
}.bind(this));

最后，您還可以使用具有詞法范圍的ES2015 箭頭函數 ：

stompClient.connect({}, frame => {
    stompClient.subscribe("/room.1247016", data => {
        var message = data.body;
        this.addItem();
    });
});

Answer 2

我無法真正測試你的代碼，但我認為這是因為js范圍。 在你調用addItem的地方，“this”不再指向組件，而是指向它的對象。 所以，你要修復它，一個引用方法是緩解范圍，代碼如下：

componentDidMount: function() {
var _self = this;
_self.loadLatestMessages();
var socket = new SockJS('http://127.0.0.1:8080/stomp');
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
  // subscribe to the /room.uid endpoint
  stompClient.subscribe("/room.1247016", function(data) {
      var message = data.body;
      console.log("Received: "+message);
      _self.addItem();
  });
 });
},