1

我正在使用react-stomp-hooks包与我的后端建立 websocket stomp 连接。我有一个函数组件，它呈现我定义的某个页面，const stompClient = useStompClient()在组件安装上我有一个 useEffect()，它应该在第一次渲染后直接通过 stomp 发布。现在的问题是，当我刷新页面时，我定义的 stompClient 未定义，但是在第一次渲染页面时（通过从另一个页面路由），一切正常。确切的 TypeError 是无法读取 undefined 的属性“发布”。我在这里没有看到什么？查看我的代码：

const SomePage = () => {
  ...
  const stompClient = useStompClient();


  useEffect(() => {
    stompClient.publish({
      destination: `/app/some_destination`,
      body: 'some-string'
    });

    ...
  }, [])
...
}

编辑1：

我认为stompClient设置为未定义，因为必须在页面刷新时再次设置与后端的连接，并且useEffect在此设置发生之前调用。所以我需要一种方法来触发stompClient.publish()唯一的连接建立后，但我不知道如何实现这一点。我最重要<App/>的组件是将所有内容包装在一个<StompSessionProvider/>（请参阅链接的包文档）中，但是我如何才能收听这个 StompSessionProvider 的已建立连接？

class App extends Component {
  render() {
    return (
      <div>
        <StompSessionProvider
            brokerURL={`${getWebsocketDomain()}/websocket`}
            debug={STOMP => console.log({STOMP})}
            onConnect={() => console.log({STOMP_CONNECT: 'TCP connection successfully established'})}
        >
          <AppRouter />
        </StompSessionProvider>
      </div>
    );
  }
}
4

0 回答 0