每次有新通知时，我的组件都无法识别它

Question

我使用 Laravel 项目的 ReactJS 负责前端部分。目前我使用 Laravel Echo Server 实现通知。我很好地呈现和更新状态，但问题是每次有新通知时，我的组件都无法识别它。这是我的通知组件：

import React, {Component} from 'react';

import Echo from "laravel-echo";

class Notifications extends Component {

  constructor(props) {
    super(props);

    this.state = {
      userLogin: {}
    };

  }

  componentDidMount(){
    axios.post(laroute.route('api.get-users'))
      .then(res=>{
        this.setState({
          userLogin:res.data.userLogin
        });
      })
      .catch(err=>{
        console.log(err);
      })

    window.Echo.private('users.' + this.state.userLogin.id)
      .notification((notification) => {
        console.log(notification);
      });

  }

  render() {
    return (
      <span>
          Notifications
      </span>
    )
  }
}

export default Notifications;

我尝试将 ComponentDidMount 更改为 ConmponentWillMount，但它仍然无法接收通知。有趣的是，如果我将那些 Listening For Notifications 放在 blade 模板中，效果很好：

@section('header')
 ....
@endsection

@section('after-scripts')
    <script>

        var userId= "{{ access()->user()->id  }}";
        window.Echo.private('users.' + userId)
            .notification((notification) => {
                console.log(notification);
            });
</script>
@endsection

Answer 1

axios.post 会产生一个异步的值。但是你的 window.Echo.private 会在那之前运行。将它移到里面并检查它是否有效。

在这里，试一试：

componentDidMount() {
  axios.post(laroute.route('api.get-users'))
    .then(res => {
      const { userLogin } = res.data;
      window.Echo.private('users.' + userLogin.id)
        .notification(notification => console.log(notification));
      this.setState({
        userLogin
      });
    })
    .catch(err => console.log(err))
}

每次有新通知时，我的组件都无法识别它

Every time there's a new notification, my component does not recognize it

reactjs

laravel-echo