reactjs - 通过套接字运行事件

Question

我使用一个文件来获取套接字响应，然后我将响应导航到其他文件。

例如：

import socket from 'socket.io-client';
import { ShowModal } from '../components/Modal';

socket.on('message', function(data){
     ShowModal(data);
})

但每次我收到以下错误：

错误：无效的挂钩调用。Hooks 只能在函数组件的主体内部调用

如何解决这个问题？

标签： reactjssocketsevents

Answer 1

你的答案是：

“钩子只能在函数组件的主体内部调用”

在您的情况下，它对您的应用程序文件的平均使用<ShowModal /> 。那么 ShowModal 最有以下内容：

例如：

import socket from 'socket.io-client';

class ShowModal extends Component {
    _isMounted = false;
    constructor(props) {
        super(props);
        this.state = {};
    }
    modal(data){
     if(this._isMounted){
          // Your Codes
     }
    }
    componentDidMount() {
        this._isMounted = true;
        socket.on("message", data => this.modal(data));
    }
    render(){
        // Put Your codes
        return (
            <>
            </>);
    }
}


export default ShowModal;