Всем привет,есть компонент на котором отображается график пульса юзера в реал-тайме. При открытии компонента я открываю соединение с сокетом и записываю последние сообщения от сокета в состояние и эти данные отображаются на графике,когда страница закрывается мы должны разорвать соединение с сокетом.
Основная логика работала хорошо без useEffect,но что бы сокет открывался и закрывался по состоянию компонента я добавил хук и теперь у меня возникли проблемы с записью данных в стейт
Сокет открывается только при обновлении страницы,и когда данные приходят в компонент графика обновляется каждый раз когда записывает новые значения,место того что бы просто добавить точку без лишних рендеров и отобразить.
import React, { useState, useEffect } from "react";
import { useTheme } from "@material-ui/core/styles";
import {LineChart,Line,XAxis,YAxis,Label,ResponsiveContainer,Tooltip,} from "recharts";
import Title from "./TittleNav";
//link for connect to socket
let ws = new WebSocket("wss://elepsio.herokuapp.com/");
export default function Chart() {
const theme = useTheme();
useEffect(() => {
ws.onopen = () => console.log("ws opened");
ws.onclose = () => console.log("ws closed");
return () => {
ws.close();
};
}, []);
const [barData, setBarData] = useState({
data: [
{
time: "18:02",
pulse: 87,
},
],
});
//set new message to state
ws.onmessage = function (event) {
setBarData({ data: [...barData.data, JSON.parse(event.data)] });
};
console.log(barData);
return (
<React.Fragment>
<Title>График</Title>
<ResponsiveContainer>
<LineChart
data={barData.data}
margin={{
top: 16,
right: 16,
bottom: 0,
left: 24,
}}
>
<XAxis dataKey="time" stroke={theme.palette.text.secondary} />
<YAxis stroke={theme.palette.text.secondary}>
<Label
angle={270}
position="left"
style={{ textAnchor: "middle", fill: theme.palette.text.primary }}
>
Пульс
</Label>
</YAxis>
<Tooltip />
<Line
type="monotone"
dataKey="pulse"
stroke={theme.palette.primary.main}
dot={false}
/>
</LineChart>
</ResponsiveContainer>
</React.Fragment>
);
}