javascript - 如何在回调函数中调用函数来更改状态？

Question

我正在实现一个欢迎显示 Web 应用程序，该应用程序获取从 RabbitMQ 收到的访客姓名并将其填充在屏幕上。在 stompClient.subscribe(... 的回调函数中，我想调用该函数来更改屏幕上的预订和 View 的状态。当我调用该函数时，它说该函数不是已定义。如何在每次收到消息时改变状态？

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 对象。

将函数语法更改为:(message) => {} 和 (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')
          })

虽然上面的代码片段可以使您的代码正常工作，理想情况下，我们应该避免动态编写这些类型的回调初始化(在渲染方法中)，也许更好的方法是创建函数调用并将它们引用为回调。像这样的(可以进行更多改进，但仅作为示例):

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')
}

然后只需在渲染代码中使用上面的两个函数作为回调即可。

最后，您可能还需要在执行其他操作之前绑定(bind)changeReservation(reservation)。