Javascript TypeError:无法读取未定义的web套接字的属性

使用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:无法读取未定义的属性“通知”

参考此行：

let newNotifications=this.state.notifications.push（数据）

为什么我不能访问

组件didmount（）

中的

状态

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

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

  }

你能测试一下吗

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

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

  }

---

提供给

channel.bind的
函数
掩盖了
componentDidMount（）
的
功能。相反，使用一个函数应该可以做到这一点

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

提供给
channel.bind的
函数
掩盖了
componentDidMount（）
的
功能。相反，使用一个函数应该可以做到这一点

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

因为您不只是在
componentDidMount
中，当您调用
this
时，您在
bind
的匿名函数中。。好啊您知道如何将状态输入到该函数中吗？对新的通知回调方法使用箭头函数，而不是常规函数。这里还有另一个错误，但我在回答中忽略了它，因为它与问题无关。push方法返回一个数字（而不是数组），因此像现在这样传递
通知：newNotifications
可能会中断。使用而不是
push
来创建一个新数组，然后将其传入。@waz另一个错误是在setState中，请检查此答案以了解更多详细信息：因为您不只是在
componentDidMount
中，当您调用
this
时，您在
绑定中的匿名函数中。啊。。好啊您知道如何将状态输入到该函数中吗？对新的通知回调方法使用箭头函数，而不是常规函数。这里还有另一个错误，但我在回答中忽略了它，因为它与问题无关。push方法返回一个数字（而不是数组），因此像现在这样传递
通知：newNotifications
可能会中断。使用而不是
push
创建一个新数组，然后传入。@waz另一个错误是在setState中，请检查此答案以了解更多详细信息：谢谢。你的意思是这样的：
channel.bind（'new-notification'，data=>{this.setState（{notifications:[…this.state.notifications，data]}）；console.log（this.state'--callback'）；}）是的，应该这样做（假设你回应了我对原始问题的评论）是的，我是。：）谢谢你的意思是这样的：
channel.bind（'new-notification'，data=>{this.setState（{notifications:[…this.state.notifications，data]}）；console.log（this.state'--callback'）；}）是的，应该这样做（假设你回应了我对原始问题的评论）是的，我是。：）谢谢你，伙计。这也起了作用。箭头功能只是稍微干净了一点。谢谢，伙计。这也起了作用。箭头函数只是稍微干净了一点。