質問編集履歴
3
状況に変化があったので編集
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,14 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
Next.jsでmdファイルをpre-renderingしてhtmlに変換し、その結果を表示するシンプルなサイトを作成しています。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
↑上記のサイトはNext.jsで作成されています。
|
|
6
|
-
|
|
7
|
-
コンテンツはmdファイルで準備し、pre-renderingでmdファイルをhtmlに変換しています。
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
非常にシンプルな構成ですが、
|
|
5
|
+
非常にシンプルな構成のサイトなのですが、ページ遷移や言語切り替えをローディング直後に連打すると
|
|
12
6
|
|
|
13
7
|
```
|
|
14
8
|
|
|
@@ -20,7 +14,9 @@
|
|
|
20
14
|
|
|
21
15
|
という警告文が表示されます。
|
|
22
16
|
|
|
17
|
+
|
|
18
|
+
|
|
23
|
-
|
|
19
|
+
以下のpre-rendering処理に何か問題があるのでしょうか？
|
|
24
20
|
|
|
25
21
|
|
|
26
22
|
|
|
@@ -190,4 +186,4 @@
|
|
|
190
186
|
|
|
191
187
|
|
|
192
188
|
|
|
193
|
-
|
|
189
|
+
ヒントでも結構ですのでご教示いただけますと幸いです。
|
2
進展がありましたので内容を大幅に更新しています。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Next.js 「
|
|
1
|
+
Next.js 「Can't perform a React state update on an unmounted component」という警告が発生し、メモリリークしてしまいます。
|
test
CHANGED
|
@@ -12,47 +12,19 @@
|
|
|
12
12
|
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
|
|
16
16
|
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
という警告文が表示されます。
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
該当箇所はおそらく以下のpre-rendering処理にあると考えています。
|
|
24
|
-
|
|
25
|
-
```
|
|
26
24
|
|
|
27
25
|
|
|
28
26
|
|
|
29
|
-
というエラーが発生します。
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
Link処理は[公式のドキュメント](https://nextjs.org/)通りに実装しています
|
|
34
|
-
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
<Link href={`/posts/${XXX}#${XXX.id}`} key={`${XXX.id}-${XXX}`}>
|
|
38
|
-
|
|
39
|
-
<a>
|
|
40
|
-
|
|
41
|
-
<li className={XXX}>
|
|
42
|
-
|
|
43
|
-
<p>{mdファイルのタイトル}</p>
|
|
44
|
-
|
|
45
|
-
</li>
|
|
46
|
-
|
|
47
|
-
</a>
|
|
48
|
-
|
|
49
|
-
</Link>
|
|
50
|
-
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
pre-rendering処理
|
|
27
|
+
pre-rendering処理（[公式のドキュメント](https://nextjs.org/)を参考に実装）
|
|
56
28
|
|
|
57
29
|
```
|
|
58
30
|
|
|
@@ -83,6 +55,8 @@
|
|
|
83
55
|
const sortedHeadlineTitles = getSortedHeadlineTitles(locale);
|
|
84
56
|
|
|
85
57
|
|
|
58
|
+
|
|
59
|
+
// ids = ['04', '03', '02', '01']
|
|
86
60
|
|
|
87
61
|
const ids = []
|
|
88
62
|
|
|
@@ -144,12 +118,76 @@
|
|
|
144
118
|
|
|
145
119
|
}
|
|
146
120
|
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
export default function Post({ sortedHeadlineTitles, postAllData, locale }) {
|
|
124
|
+
|
|
125
|
+
return (
|
|
126
|
+
|
|
127
|
+
<Layout sortedHeadlineTitles={sortedHeadlineTitles}>
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
<About locale={locale} />
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
{postAllData.map((postData) => (
|
|
136
|
+
|
|
137
|
+
<PostData postData={postData} key={postData.id} />
|
|
138
|
+
|
|
139
|
+
))}
|
|
140
|
+
|
|
141
|
+
</Layout>
|
|
142
|
+
|
|
143
|
+
)
|
|
144
|
+
|
|
145
|
+
}
|
|
146
|
+
|
|
147
147
|
```
|
|
148
148
|
|
|
149
149
|
|
|
150
150
|
|
|
151
|
-
|
|
151
|
+
警告文の通りに解釈すると、unMount時にも更新がかかってしまっているそうです。
|
|
152
152
|
|
|
153
153
|
|
|
154
154
|
|
|
155
|
+
バンドル後のdevツールで確認したコードは
|
|
156
|
+
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
function Post(_ref) {
|
|
160
|
+
|
|
161
|
+
_s();
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
var _this = this;
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
var sortedHeadlineTitles = _ref.sortedHeadlineTitles,
|
|
170
|
+
|
|
171
|
+
postAllData = _ref.postAllData,
|
|
172
|
+
|
|
173
|
+
locale = _ref.locale;
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
以下 割愛
|
|
178
|
+
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
となっており、この
|
|
182
|
+
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
var sortedHeadlineTitles = _ref.sortedHeadlineTitles,
|
|
186
|
+
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
が問題だとdevツールで記載されていました。
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
155
|
-
|
|
193
|
+
この警告を解消するにはどうすれば良いでしょうか？ヒントでも結構ですのでご教示いただけますと幸いです。
|
1
初心者マークつける
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -8,7 +8,25 @@
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
+
非常にシンプルな構成ですが、devツールを開いて、ページ上部にあるリンクや言語切り替えをローディング直後に連打すると
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
|
|
11
|
-
|
|
15
|
+
Error: Route did not complete loading: /posts/[id]」
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Error: Route did not complete loading: /
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
というエラーが発生します。
|
|
12
30
|
|
|
13
31
|
|
|
14
32
|
|