使用React.context和socket.io实现实时图表的React应用程序

Question

我正在尝试使用TypeScript和React构建一个用于显示实时图表的网站，但在显示图表之前无法正确地从服务器获取值。

我的目标是...

1. 通信协议是使用socket.io的websocket。
2. 使用socket.io并将数据存储在React.Context（useSocket.tsx）中，以便轻松地从任何React组件访问数据。
3. 数据的显示在Home.tsx中。
4. socket事件为initial_data和new_data。
5. initial_data事件在首次访问网站时接收。
6. new_data事件定期接收。
7. 在获取上述两个事件的时间内，自动更新Home.tsx中的值。

我在网上研究了一些文章，例如，解释了一种使用useEffect()函数返回socket.disconnect()的方法。所以，我构建的代码如下。 useSocket.tsx

import {useContext, createContext, useState, useEffect} from "react";
import {io, Socket} from "socket.io-client";
import {chartDataType} from "../types/chartDataType";

type Context = {
    chartData: Array<chartDataType>;
}

const SocketContext = createContext<Context>({
    chartData: [],
});

const SocketsProvider = (props: any) => {

    const [chartData, setChartData] = useState();

    useEffect( () => {
        const socket: Socket = io("http://***.***.***.***");

        socket.on('initial_data', (data) => {
            console.log(data);
            setChartData(data);
        });

        socket.on('new_data', (data) => {
            console.log(data);
        });

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

    return (
        <SocketContext.Provider value={{chartData}} {...props} />
    );
}

const useSocket = () => useContext(SocketContext);

export { SocketsProvider, useSocket };

Home.tsx

import {memo, VFC} from "react";
import { useSocket } from "../../context/useSocket";
import {Heading} from "@chakra-ui/react";

export const Home: VFC = memo(() => {
    const { chartData } = useSocket();

    return (
        <>
            <Heading as="h1">{`${chartData}`}</Heading>
        </>
    )
})

上述代码导致浏览器控制台出现错误Uncaught TypeError: Cannot read properties of undefined (reading '0')。但是当注释掉<Heading>...</Heading>在Home.tsx中的行时，useSocket.tsx中的console.log可以在浏览器控制台中显示从服务器接收到的值。
我无法想出正确实现的方法。是chartData类型定义有误吗？还是其他原因？chartDataType的定义没有问题。
请问正确实现的方法是什么？

- Pierogi

Answer 1

发生的情况是您正在尝试呈现一个空数组，数据尚未加载。

您需要首先检查charData是否存在或未定义。

像这样：

return ( 
   {CharData ? <Heading /> ... : null }
)

- Arcanus

---

谢谢您的回复。它运行良好。 - Pierogi