与脉轮反应不会触发 useEffect答案

【问题标题】：React with chakra doesn't trigger useEffect与脉轮反应不会触发 useEffect
【发布时间】：2023-01-03 11:23:34
【问题描述】：

我正在做将 chakra ui 与 create-react-app 结合使用的第一步。 UI 将是一个实时数据查看器（使用 react-plotly）。如果由 send_plot_data 触发，则 socket.io 服务器每秒发出新的 json 数据，并且 ui 应该使用 plotly-react 绘制数据

没有下面的脉轮代码就像一个魅力。使用脉轮，请求配置 (get_config) 和请求绘图数据 (send_plot_data) 的 socket.emit 行不会被触发（我查看了 socket.io 服务器日志）。

下面的大部分代码（按钮除外，它们还应该根据接收到的 JSON 数据触发一些发射和填充保管箱选项）

为什么这段代码不能像 chakra 那样工作？没有脉轮它工作。有简单的解决方法吗？

import React, { useEffect, useState } from 'react';
import {io} from 'socket.io-client';
import Plot from 'react-plotly.js';

import {
  ChakraProvider, Flex, Box, Spinner, Container, Text
} from '@chakra-ui/react';

const socket = io("http://192.168.0.101:5000");

const App = () => {
  const [data, setData] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
      socket.on("connect",()=>{
        console.log(`Connected`);
        socket.emit("send_plot_data", {symbol: "default"});
        socket.emit("get_config", {config: ""});
      });
      socket.on("do_graph", res => {
        console.log(`Graph plot ok`)
        if(loading===true){
          setLoading(false);
        }
        let response = JSON.parse(res);
        response.config = {responsive: true}
        setData(response);
      });
      socket.on("connect_error", (err) => {
        console.log(`connect_error due to ${err.message}`);
      });
      return () => socket.disconnect();

  //eslint-disable-next-line
  }, []);

  return (
   <ChakraProvider resetCSS>
         <Box>
             {loading?(
                <Flex flexDirection="column" alignItems="center">
                  <Container minHeight="10vh">
                  </Container>
                  <Spinner />
                  <Text fontSize='lg'> Loading plot data ... </Text>
                </Flex>
              ):(
                <Plot {...data} />
              )}
          </Box>
    </ChakraProvider>
  );
}

【问题讨论】：

标签： reactjs react-hooks chakra-ui

【解决方案1】：

我认为问题可能在于您如何处理 connect 和 connect_error 事件。在您的代码中，您将返回一个在组件卸载时调用 disconnect 的函数，但在发出 connect_error 事件时也会调用该函数。这将导致套接字断开连接，因此不会触发send_plot_data 和get_config 事件。

一种解决方案是将 disconnect 调用移动到一个单独的函数中，该函数仅在组件卸载时调用。您可以通过添加一个新的 useEffect 挂钩来完成此操作，该挂钩仅在组件卸载时调用 disconnect：

useEffect(() => {
  return () => socket.disconnect();
}, []);

【讨论】：