如何在回调函数中调用函数以更改状态？

Question

我正在实现一个Welcome Display Web应用程序，该应用程序将从RabbitMQ接收来宾姓名，并将其填充到屏幕上。在stompClient.subscribe(...的回调函数中，我想调用该函数以更改保留状态并在屏幕上查看。当我调用该函数时，它说该函数未定义。每次收到消息时如何更改状态？

import React from 'react';
import '../css/App.css'
import WelcomeVisitor from '../pages/WelcomeVisitor';
import ThankYou from '../pages/ThankYou';
import Stomp from 'stompjs'



class App extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      currentView: 'ThankYou',
      currentReservation: null
    }

    this.siteId = props.match.params.siteId
    this.bayNumber = props.match.params.bayNumber
    this.changeView = this.changeView.bind(this)
    this.connectRabbit = this.connectRabbit.bind(this)
  }

  changeView(view){
    this.setState({
      currentView: view
    })
  }

 changeReservation(reservation){
    this.setState({
      currentReservation: reservation
    })
  }

  render(){

    let view = ''  

    this.connectRabbit(this.siteId, this.bayNumber)

    if(this.state.currentView === 'ThankYou'){
      view = <ThankYou changeView={this.changeView}/>
    } else if(this.state.currentView === 'WelcomeVisitor') {
      view = <WelcomeVisitor guestName='Quinton Thompson'/>
    } 


      return (
        <div className="App">
          {view}
        </div>
        )

    }


    connectRabbit(siteId, bayNumber){

      let stompClient

          var ws = new WebSocket('ws://localhost:15674/ws')

          const connectHeaders = {
              'login': 'guest',
              'passcode': 'guest',
          }

          const queueHeaders = {
              'x-queue-name': `${bayNumber}.visit.out.display`,
              'durable': 'true',
              'auto-delete': 'false'
          }
          stompClient = Stomp.over(ws)

          stompClient.connect(connectHeaders , function(frame){
                      console.log('Connected')
                     stompClient.subscribe('/exchange/ds.game/visit.out',function(message){
                       //changeReservation and changeView is not defined
                         this.changeReservation(message.body)
                         this.changeView('WelcomeVisitor')
                     }, queueHeaders)
                     console.log('here')
          })
      }


}

export default App;

Answer 1

函数回调中的this对象可能未引用类中的this对象。

将函数语法更改为：（消息）=> {}和（frame）=> {}应该可以使它起作用。见下文：

stompClient.connect(connectHeaders ,(frame) => {
                      console.log('Connected')
                     stompClient.subscribe('/exchange/ds.game/visit.out', (message) => {
                       //changeReservation and changeView is not defined
                         this.changeReservation(message.body)
                         this.changeView('WelcomeVisitor')
                     }, queueHeaders)
                     console.log('here')
          })

虽然上面的代码段可以使您的代码正常工作，理想情况下，我们应该避免即时编写此类回调初始化（在render方法中），也许更好的方法是创建函数调用并将其引用为回调。像这样的东西[[（可以做更多的改进，但仅作为示例）：

connectCallback(stompClient, queueHeaders, frame) {
    console.log('Connected');
    stompClient.subscribe('/exchange/ds.game/visit.out', (message) => { 
        this.subscribeCallback(message)
    }, queueHeaders);
}

subscribeCallback(message) {
    this.changeReservation(message.body)
    this.changeView('WelcomeVisitor')
}

然后只需将上面的两个函数用作渲染代码中的回调。
最后，您可能还需要先绑定changeReservation（reservation）。