Question

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

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，但对于通知仍然无效。有趣的是，如果我将“侦听通知”放在刀片模板中，效果很好：

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

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

1 个答案: