我目前正在尝试在一个电子软件中使用React为图形部分添加图表。除了我添加了与按钮(节)的交互,以便根据用户对其中一个节的点击(变量selectedSection)在图表中插入不同的数据。因此,我在**useEffect()**函数的依赖项中添加了chartPMS和chartPFS函数,以便访问selectedSection变量。
**useEffect()**函数通过WebSocket从python程序连续接收数据,问题是当我通过npm start
命令运行代码时,我得到一个非常频繁的数据显示,并且在控制台中连续出现以下错误:WebSocket connection to 'ws:<URL>/' failed: WebSocket is closed before the connection is established.
但是这些函数确实收到了selectedSection变量的更改,这些更改是基于对不同部分的点击。
我应该指出,我使用**useEffect()**函数以前以这种方式,它的工作,但我没有访问更新后的版本后,点击selectedSection变量的一个部分:
useEffect(() => {
const socket = new WebSocket('ws://localhost:8000');
socket.addEventListener('message', (event) => {
setData(JSON.parse(event.data));
chartPFS(JSON.parse(event.data));
chartPMS(JSON.parse(event.data));
});
}, []);
下面是代码:
应用程序js:
import React, { useState, useEffect, useRef, useSyncExternalStore } from 'react';
import Modal from './Modal/Modal'
import {Chart as ChartJS,LinearScale,PointElement,LineElement,Tooltip,Legend,Title,scales} from 'chart.js';
import {Scatter } from 'react-chartjs-2';
import { handleDataClick } from './Modal/Modal';
ChartJS.register(
LinearScale,
PointElement,
LineElement,
Tooltip,
Legend,
Title);
//JSON.parse(event.data)
//<Doughnut ref={chartReference} data={data} />
//--------------------------- OPTIONS GRAPHIQUE ----------------------------------//
export const options5 = {
responsive: true,
maintainAspectRatio:false,
plugins: {
legend: false,
scales: {
y: {
ticks: {
min: 0,
max: 25
}
}
}
},
};
//--------------------------- FUNCTION APP() ----------------------------------//
export default function App() {
let da;
const [data, setData] = useState(null);
const [show,setShow] = useState(false);
const [selectedSection, setSelectedSection] = useState("s1");
const [selectedSailP3,setSelectedSailP3]=useState("fs");
//----------------------- Graphiques Variables initiales -------------------//
const [chartDataPFS,setChartDataPFS]=useState({
datasets: [
{
label: 'Draft',
showLine:true,
data: [{x:3,y:1},{x:3.5,y:2},{x:5.5,y:3},{x:5.25,y:4},{x:5,y:5}],
backgroundColor: '#df9305',
borderColor: '#df9305'
}]
});
const [chartDataPMS,setChartDataPMS]=useState({
datasets: [
{
label: 'Draft',
showLine:true,
data: [{x:3,y:1},{x:3.5,y:2},{x:5.5,y:3},{x:5.25,y:4},{x:5,y:5}],
backgroundColor: '#df9305',
borderColor: '#df9305'
}]
});
//----------------------- Graphiques Fonctions mise à jour -------------------//
const chartPFS=(d) =>{
let dataToUse;
dataToUse=[{x:0,y:0},
{x:3.3/2,y:d["fs"][selectedSection]["camber"]*0.75},
{x:3.3,y:d["fs"][selectedSection]["draft"]},
{x:(10-3.3)/2+3.3,y:d["fs"][selectedSection]["draft"]*0.55},
{x:10,y:0}];
setChartDataPFS({
datasets: [
{
label: 'Profile',
showLine:true,
maintainAspectRatio:false,
fill:false,
data: dataToUse,
backgroundColor: '#000000',
borderColor: '#000000'
}]
});
};
const chartPMS=(d) =>{
let dataToUse;
dataToUse=[{x:0,y:0},
{x:3.3/2,y:d["ms"][selectedSection]["camber"]*0.75},
{x:3.3,y:d["ms"][selectedSection]["draft"]},
{x:(10-3.3)/2+3.3,y:d["ms"][selectedSection]["draft"]*0.55},
{x:10,y:0}];
setChartDataPMS({
datasets: [
{
label: 'Profile',
showLine:true,
maintainAspectRatio:false,
fill:false,
data: dataToUse,
backgroundColor: '#000000',
borderColor: '#000000'
}]
});
};
//----------------------- Fonctions Récupération données au clic -------------------//
const handleSectionClick=(section) =>{
setSelectedSection(section);
};
//----------------------- Mise à jour données -------------------//
useEffect(() => {
const socket = new WebSocket('ws://localhost:8000');
const handler = (event) => {
setData(JSON.parse(event.data));
chartPFS(JSON.parse(event.data));
chartPMS(JSON.parse(event.data));
};
socket.addEventListener('message', handler);
return () => {
socket.removeEventListener('message', handler);
socket.close();
};
}, [chartPFS, chartPMS]);
return (
<div>
<div className="home">
<div className="template-1" id="temp1">
<div class="panel-5">
<div class="panel-header">
<h1>SAILS sections</h1>
<i class='bx bx-cog modal-trigger-panel'></i>
</div>
<div class="panel-body">
<div class="profil-container" style={{display: "flex", flexDirection: "row"}}>
<div style={{width: "50%",height: "100%"}}>
<Scatter options={options5} data={chartDataPFS} selectedSection={selectedSection}/>
</div>
<div style={{width: "50%",height: "100%"}}>
<Scatter options={options5} data={chartDataPMS} selectedSection={selectedSection}/>
</div>
</div>
<div class="button-sec">
<input type="submit" value="Section 5" class={`section5 ${selectedSection === "s5" ? 'active' : ''}`} onClick={()=>{handleSectionClick("s5")}}/>
<input type="submit" value="Section 4" class={`section4 ${selectedSection === "s4" ? 'active' : ''}`} onClick={()=>{handleSectionClick("s4")}}/>
<input type="submit" value="Section 3" class={`section3 ${selectedSection === "s3" ? 'active' : ''}`} onClick={()=>{handleSectionClick("s3")}}/>
<input type="submit" value="Section 2" class={`section2 ${selectedSection === "s2" ? 'active' : ''}`} onClick={()=>{handleSectionClick("s2")}}/>
<input type="submit" value="Section 1" class={`section1 ${selectedSection === "s1" ? 'active' : ''}`} onClick={()=>{handleSectionClick("s1")}}/>
</div>
<div class="button-sail">
<input type="submit" value="Foresail" class="btn-hs modal-trigger-hs"/>
<input type="submit" value="Mainsail" class="btn-ms modal-trigger-ms"/>
</div>
</div>
</div>
</div>
<Modal onClose={() => setShow(false)} show={show} Data={selectedDataType} sectionData={sectionData} setSectionData={setSectionData}/>
</div>
</div>
);
}
巨蟒:
import asyncio
import random
import datetime
import websockets
import json
sv={"fs":{
"s5":{"entry":2,"cfwd":3,"camber":2,"draft":3,"caft":5,"exit":5,"twist":15,"saglat":10,"saglong":10},
"s4":{"entry":2,"cfwd":3,"camber":2,"draft":3,"caft":5,"exit":5,"twist":15,"saglat":10,"saglong":10},
"s3":{"entry":2,"cfwd":3,"camber":2,"draft":3,"caft":5,"exit":5,"twist":15,"saglat":10,"saglong":10},
"s2":{"entry":2,"cfwd":3,"camber":2,"draft":3,"caft":5,"exit":5,"twist":15,"saglat":10,"saglong":10},
"s1":{"entry":2,"cfwd":3,"camber":2,"draft":3,"caft":5,"exit":5,"twist":15,"saglat":10,"saglong":10},
},
"ms":{
"s5":{"entry":2,"cfwd":3,"camber":2,"draft":3,"caft":5,"exit":5,"twist":15,"saglat":10,"saglong":10},
"s4":{"entry":2,"cfwd":3,"camber":2,"draft":3,"caft":5,"exit":5,"twist":15,"saglat":10,"saglong":10},
"s3":{"entry":2,"cfwd":3,"camber":2,"draft":3,"caft":5,"exit":5,"twist":15,"saglat":10,"saglong":10},
"s2":{"entry":2,"cfwd":3,"camber":2,"draft":3,"caft":5,"exit":5,"twist":15,"saglat":10,"saglong":10},
"s1":{"entry":2,"cfwd":3,"camber":2,"draft":3,"caft":5,"exit":5,"twist":15,"saglat":10,"saglong":10},
}}
async def handler(websocket, path):
while True:
#log_decoder()
for key1 in sv:
for key2 in sv[key1]:
sv[key1][key2]["entry"] = random.randint(1, 10)
sv[key1][key2]["cfwd"] = random.randint(1, 10)
sv[key1][key2]["camber"] = random.randint(1, 10)
sv[key1][key2]["draft"] = random.randint(1, 4)
sv[key1][key2]["caft"] = random.randint(1, 10)
sv[key1][key2]["exit"] = random.randint(1, 10)
sv[key1][key2]["twist"] = random.randint(1, 10)
sv[key1][key2]["saglat"] = random.randint(1, 10)
sv[key1][key2]["saglong"] = random.randint(1, 10)
#data = [random.randint(0, 20) for _ in range(10)]
await websocket.send(json.dumps(sv))
await asyncio.sleep(1)
start_server = websockets.serve(handler, "localhost", 8000)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()
此致,
1条答案
按热度按时间fslejnso1#
如果你将依赖设置为
selectedSection
,它应该可以解决你的问题,这是因为当你将依赖设置为函数时,它会以你的计算机允许的速度重新呈现,但是如果你将它设置为selectedSection
,它只会在更新并包含正确的值时重新呈现。