回答編集履歴
2
コードの解説を追加
test
CHANGED
|
@@ -183,3 +183,27 @@
|
|
|
183
183
|
}
|
|
184
184
|
|
|
185
185
|
```
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
コードの解説らしきものを書いておきます。
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
- 表示の順番はクリックした順番です。(一度非表示にして再表示すると色が変わるのが気になる…。)
|
|
198
|
+
|
|
199
|
+
- 人口データはそんなに変化しないと思うので、一度取ってきたものは非表示でもキャッシュしてます。
|
|
200
|
+
|
|
201
|
+
- useEffect を使うと無駄な render が発生するので、なるべく使わないようにしました。
|
|
202
|
+
|
|
203
|
+
- useState も必要最小限なものに絞り込みました。
|
|
204
|
+
|
|
205
|
+
- graphData のところはループで書いても良いと思います。(その方が分かりやすいかも…。)
|
|
206
|
+
|
|
207
|
+
- graphData の data は、配列を作り直さないと表示がおかしくなるので仕方なく再生成してます。
|
|
208
|
+
|
|
209
|
+
- Map はキーが number なので使ってみましたが、オブジェクトでも良かったかも。
|
1
誤字修正
test
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
const graphData: { data: number[]
|
|
17
|
+
const graphData: { name: string, data: number[] }[] = checkedPrefCodes
|
|
18
18
|
|
|
19
19
|
.map(code => prefectures.find(pref => pref.prefCode === code))
|
|
20
20
|
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
|
|
113
113
|
setLoadedPrefData(oldData => {
|
|
114
114
|
|
|
115
|
-
|
|
115
|
+
const newData = new Map(oldData);
|
|
116
116
|
|
|
117
117
|
newData.set(prefCode, res[0].data.map(item => item.value));
|
|
118
118
|
|