javascript - 类型错误 : Cannot read property of undefined with web-sockets

Question

这个问题已经有答案了:

How to use setState inside callback: ReactJS (2 个回答)

setState is not updating state properly (4 个回答)

已关闭 5 年前。

使用React和pusher的同构框架来获取websocket。

当我处于 componentDidMount() 时，我似乎无法访问状态功能。

class TopbarNotification extends Component {
   state = {
     visible: false,
     notifications: []
   };

  constructor(props) {
    super(props);
    this.state = {
     notifications: [],
     visible: false
    };
  }

  componentDidMount() {
    var pusher = new Pusher('xxxxxxxxxxxx', {
       cluster: 'xxx',
       encrypted: true
    });

    var channel = pusher.subscribe('notifications');
    channel.bind('new-notification', function (data) {
      let newNotifications = this.state.notifications.push(data)
      this.setState({
        notifications: newNotifications
      })
      alert(data.message);
    });

  }

  render() {
     // ...Blah blah, blah blah
  }
}

我收到此错误:TypeError: Cannot read property 'notifications' of undefined

引用这一行:let newNotifications = this.state.notifications.push(data)

为什么我无法访问state里面componentDidMount() ？

Answer 1

赋予channel.bind的函数掩盖了componentDidMount()的this。使用arrow function相 react 该可以解决问题。

channel.bind('new-notification', data => {
  let newNotifications = this.state.notifications.push(data)
  this.setState({
    notifications: newNotifications
  })
  alert(data.message);
});