我有以下脚本在welcome.blade.php中完美地工作:
<script>
Echo.channel('home')
.listen('NewPatient',(e) => {console.log(e.patient);
})
</script>
Home为通道名称，NewPatient为事件名称。
如何在React组件中实现这个脚本，以便我可以精确地在该组件中显示数据?
<病人组件/strong>In react:
import React,{Component} from 'react';
import axios from 'axios';
import Echo from "laravel-echo";
class Patient extends React.Component {
constructor(props) {
super(props);
this.state = {
patients : []
};
}
componentDidMount() {
axios.get('api/patients')
.then(response => {this.setState({patients: response.data})})
.catch(err => console.log(err));
}
render() {
return (
<ul>
{ this.state.patients.map(patient => <li>{patient.nom}</li>)}
</ul>
)
}
}
export default Patient;
当我尝试粘贴脚本在ComponentDidMount区域，我有错误，如laravel_echo__WEBPACK_IMPORTED_MODULE_2__.default.channel和Can't perform a React state update on an unmounted component
解决!在ComponentDidmount
的代码中添加了window.旁边的Echowindow.Echo.channel('home')
.listen('NewPatient',(e) => {console.log(e.patient);
})