挂钩调用无效。钩子只能在功能组件的内部调用

Question

我正在尝试创建类似监控数据库 (RabbitMQ) 的后台工作者。如果有新条目，它会在UI.

中通知用户

我从应用栏调用我的“后台工作者”：

<AppBar>
    <BGWorker />
</AppBar>

这是我的BGWorker.js

import { Notify } from 'Notify.ts';

const { Client } = require('@stomp/stompjs');

class BGWorker extends Component {
    componentDidMount(){
        this.client = new Client();
        this.client.configure({
            brokerURL: 'ws://192.168.1.5:15555/ws',
            connectHeaders:{
                login: "guest",
                passcode: "guest"
            },

            onConnect: () => {
                this.client.suscribe('exchange/logs', message => {
                    console.log(message.body);       //yes this does print out correctly
                    Notify(message.body, 'info');    //error here
            },
        });

        this.client.activate();
    }

    render(){
        return (
            <div/>
        );
    }
}

export default BGWorker

这是我的通知函数，位于 Notify.ts

import { useDispatch } from 'react-redux';
import { showNotification } from 'react-admin';

export const Notify = (msg:string, type:string='info') => {
    const dispatch = useDispatch();

    return () => {
        dispatch(showNotification(msg, type)); //this will call React-Admin's showNotification function
        //... and other stuff
    };
};

但我收到“无效的挂钩调用。挂钩只能在功能组件的主体内调用。”每当有条目进入时。我该如何解决这个问题？我阅读了 React 文档并尝试使用自定义挂钩，但效果不佳（不确定我是否正确执行）：

function useFoo(client){ 
    if(client !== undefined)
    {
        client.suscribe('exchange/logs', message => { //I get an 'Uncaught (in promise) TypeError: Cannot read property of 'subscribe' of undefined
            Notify(message.body, 'info');
        },
    }
}

class BGWorker extends Component {
    ...
    onConnect: useFoo(this.client);
    ...
}

Answer 1

为了使用钩子，您应该将 class 转换为功能组件。我假设你不知道钩子和功能组件。

此博客将帮助您了解转换的细微差别 -> https://nimblewebdeveloper.com/blog/convert-react-class-to-function-component

其次，你需要知道钩子是如何工作的。参考这个 -> https://reactjs.org/docs/hooks-intro.html

function BGWorker() {
  const dispatch = useDispatch();

  React.useEffect(() => {
       const client = new Client();
       client.configure({
            brokerURL: 'ws://192.168.1.5:15555/ws',
            connectHeaders:{
                login: "guest",
                passcode: "guest"
            },

            onConnect: () => {
                client.suscribe('exchange/logs', message => {
                    // dispatch your actions here
                    dispatch()
            }),
        });

        client.activate();
  }, []);

  return <div />
}

最好多看几篇博客，多看几篇教程，了解一下hooks和函数式组件。然后尝试解决你的问题。

你可能会在这里找到你的答案，在很长的运行中，你需要了解它们。

挂钩调用无效。钩子只能在功能组件的内部调用

Invalid hook call. Hooks can only be called inside the body of a functional component

reactjs

react-admin