質問編集履歴
3
コメントの付与
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
import {useContext, createContext, useState, useEffect, useRef} from "react";
|
|
16
16
|
import {io, Socket} from "socket.io-client";
|
|
17
17
|
|
|
18
|
+
//console.logでの日時表示用の関数
|
|
18
19
|
const current_time_readable = () => {
|
|
19
20
|
let date_obj = new Date();
|
|
20
21
|
return `${date_obj.getUTCFullYear()}-${('0' + (date_obj.getUTCMonth() + 1)).slice(-2)}-${('0' + date_obj.getUTCDate()).slice(-2)} ${('0' + date_obj.getUTCHours()).slice(-2)}:${('0' + date_obj.getUTCMinutes()).slice(-2)}:${('0' + date_obj.getUTCSeconds()).slice(-2)}`;
|
|
@@ -24,14 +25,19 @@
|
|
|
24
25
|
children: ReactNode;
|
|
25
26
|
}
|
|
26
27
|
|
|
28
|
+
//Contextの作成。contextDataを他のコンポーネントへ渡す
|
|
27
29
|
const DataContext = createContext({
|
|
28
30
|
contextData: [] as Array<any>,
|
|
29
31
|
});
|
|
30
32
|
|
|
33
|
+
//socketオブジェクトを作成して通信を開始。
|
|
31
34
|
const socket: Socket = io("http://***.***.***.***");
|
|
32
35
|
|
|
33
36
|
const DataProvider = (props: Props) => {
|
|
37
|
+
//他のコンポーネントへ渡すcontextData変数をuseStateで作成
|
|
34
38
|
const [contextData, setContextData] = useState<Array<any>>([]);
|
|
39
|
+
|
|
40
|
+
//データの一時保存、更新用の変数をuseRefで作成
|
|
35
41
|
let socketData = useRef<Array<any>>([]);
|
|
36
42
|
|
|
37
43
|
useEffect(() => {
|
|
@@ -40,32 +46,54 @@
|
|
|
40
46
|
console.log(e);
|
|
41
47
|
});
|
|
42
48
|
|
|
49
|
+
//初期データ受信用のsocketイベント
|
|
43
50
|
socket.on('initial_data_to_browser', (data) => {
|
|
51
|
+
//受信データをsocketDataへ保存
|
|
44
52
|
socketData.current = data;
|
|
53
|
+
|
|
54
|
+
//useRef変数の確認表示
|
|
45
55
|
console.log('initialData');
|
|
46
56
|
console.log(socketData.current);
|
|
57
|
+
|
|
58
|
+
//contextDataへsocketDataを保存
|
|
47
59
|
setContextData(() => socketData.current);
|
|
60
|
+
|
|
61
|
+
//contextDataの確認表示（ステートの確認表示）
|
|
48
62
|
console.log('stateData');
|
|
49
63
|
console.log(contextData);
|
|
50
64
|
});
|
|
51
65
|
|
|
66
|
+
//新規データ受信用のsocketイベント
|
|
52
67
|
socket.on('test_emit_10s', (data) => {
|
|
68
|
+
//受信時間の表示
|
|
53
69
|
console.log(`${current_time_readable()} | test_data received`);
|
|
70
|
+
|
|
71
|
+
//古いデータを１つだけ削除
|
|
54
72
|
socketData.current.shift();
|
|
73
|
+
|
|
74
|
+
//最新データを追加
|
|
55
75
|
socketData.current.push(data);
|
|
76
|
+
|
|
77
|
+
//データの更新結果の確認表示
|
|
56
78
|
console.log('socketData');
|
|
57
79
|
console.log(socketData.current);
|
|
80
|
+
|
|
81
|
+
//contextDataへ更新結果を保存
|
|
58
82
|
setContextData(socketData.current);
|
|
83
|
+
|
|
84
|
+
//contextDataの確認表示(ステートの確認表示)
|
|
59
85
|
console.log('contextData');
|
|
60
86
|
console.log(contextData);
|
|
61
87
|
});
|
|
62
88
|
|
|
63
89
|
return () => {
|
|
90
|
+
//コンポーネントがアンマウントされた時にsocket通信を終了
|
|
64
91
|
socket.disconnect()
|
|
65
92
|
};
|
|
66
93
|
}, []);
|
|
67
94
|
|
|
68
95
|
return (
|
|
96
|
+
//他のコンポーネントへの出力としてcontextDataを設定
|
|
69
97
|
<DataContext.Provider value={{contextData}}>
|
|
70
98
|
{props.children}
|
|
71
99
|
</DataContext.Provider>
|
|
@@ -85,6 +113,7 @@
|
|
|
85
113
|
import {useData} from "../../context/dataContext";
|
|
86
114
|
import {chartDataType} from "../../types/chartDataType";
|
|
87
115
|
|
|
116
|
+
//表示データに現在時刻を付与するための関数
|
|
88
117
|
const current_time_readable = () => {
|
|
89
118
|
let date_obj = new Date();
|
|
90
119
|
return `${date_obj.getUTCFullYear()}-${('0' + (date_obj.getUTCMonth() + 1)).slice(-2)}-${('0' + date_obj.getUTCDate()).slice(-2)} ${('0' + date_obj.getUTCHours()).slice(-2)}:${('0' + date_obj.getUTCMinutes()).slice(-2)}:${('0' + date_obj.getUTCSeconds()).slice(-2)}`;
|
|
@@ -96,9 +125,12 @@
|
|
|
96
125
|
|
|
97
126
|
export const ChartCard: VFC<Props> = (props) => {
|
|
98
127
|
const {dataName} = props;
|
|
128
|
+
|
|
129
|
+
//contextDataをchartDataとして受け取り
|
|
99
130
|
const chartData = useData().contextData;
|
|
100
131
|
const propNameData: Array<chartDataType> = [];
|
|
101
132
|
|
|
133
|
+
//chartDataから特定の項目のデータを抽出して新たに配列を作成
|
|
102
134
|
if (chartData) {
|
|
103
135
|
chartData.forEach((data) => {
|
|
104
136
|
propNameData.push({
|
|
@@ -111,6 +143,7 @@
|
|
|
111
143
|
return (
|
|
112
144
|
<>
|
|
113
145
|
{
|
|
146
|
+
//データの表示
|
|
114
147
|
propNameData ? (propNameData.map((data: any) => (
|
|
115
148
|
<Heading as="h1" key={data.unixTime}>{`${current_time_readable()} | ${data.unixTime} | ${data.value}`}</Heading>
|
|
116
149
|
))) : null
|
2
タグを追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|
1
コンポーネントの親子関係に関する追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -121,6 +121,8 @@
|
|
|
121
121
|
```
|
|
122
122
|
上記のコードだと`dataContext.tsx`では `socketData`の保存・更新はうまくいっているのですが、`contextData`への保存がうまくいっておらず空配列のままです（`initial_data_to_browser`、`test_emit_10s`のどちらのイベント発生時でも）。
|
|
123
123
|
`dataCard.tsx`の表示は初期データはブラウザに表示されるのですが、その後の更新データは表示されません。この点に関しては、`dataContext.tsx`で`contextData`は空のままなのに初期データだけが`dataCard.tsx`に渡されているのが不思議です。
|
|
124
|
+
`dataCard.tsx`はコンポーネントの上位階層で`<DataProvider>`タグで囲んでいます（間にルーティングのためのコンポーネントは存在しています）。
|
|
124
125
|
|
|
125
126
|
`dataCard.tsx`で初期データ・更新データをリアルタイムに表示するにはどう修正すればいいでしょうか？
|
|
127
|
+
よろしくお願いします。
|
|
126
128
|
|