teratail
回答率
85.37%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップに関する質問next jsでuseStateを使うと無限ループになってしまいます

編集履歴

質問編集履歴

1

具体例を追加した

2020/04/22 02:58

投稿

otaaa
otaaa

スコア19

test CHANGED
@@ -1 +1 @@
1
- next jsでtypescriptを使って選択期間を現在の日付によって変えたいです
1
+ next jsでuseStateを使うと無限ループになってしまいます
test CHANGED
@@ -10,79 +10,47 @@
10
10
 
11
11
  にしたいです。
12
12
 
13
+ ### エラーメッセージ
14
+
15
+ Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
16
+
17
+ と無限ループになりエラーになっています。
18
+
13
19
  ### 試したこと
14
20
 
15
- if文を使ってやってみたのですが、宣言されていますが、その値が読み取られることはありません
21
+ ネットで調べたら関数にしたらいいと書いてあってやってみたのですが、ダメでした
16
-
17
- となり、使うことができませんでした
18
22
 
19
23
  ```typescript
20
24
 
21
- if (1<=DateTime.local().month&&DateTime.local().month <= 7) {
25
+ function axx() {
22
26
 
23
- const [startAt, setStartAt] = useState(
27
+ setStartAt(
24
28
 
25
- startOfMonth(
29
+ DateTime.local()
26
30
 
27
- DateTime.local()
31
+ .set({ month: 8 })
28
32
 
29
- .set({ month: 8 })
33
+ .minus({ year: 1 })
30
34
 
31
- .minus({year:1})
32
-
33
- .toJSDate(),
35
+ .toJSDate(),
34
-
35
- ),
36
36
 
37
37
  );
38
38
 
39
- const [endAt, setEndAt] = useState(
39
+ setEndAt(
40
40
 
41
- endOfMonth(
41
+ DateTime.local()
42
42
 
43
- DateTime.local()
43
+ .set({ month: 7 })
44
44
 
45
- .set({ month: 7 })
46
-
47
- .plus({ year: 1 })
48
-
49
- .toJSDate(),
45
+ .toJSDate(),
50
-
51
- ),
52
46
 
53
47
  );
54
48
 
55
- } else {
49
+ }
56
50
 
57
- const [startAt, setStartAt] = useState(
51
+ if (1 <= nowMonth && nowMonth <= 7) {
58
52
 
59
- startOfMonth(
60
-
61
- DateTime.local()
62
-
63
- .set({ month: 8 })
64
-
65
- .toJSDate(),
53
+ axx();
66
-
67
- ),
68
-
69
- );
70
-
71
- const [endAt, setEndAt] = useState(
72
-
73
- endOfMonth(
74
-
75
- DateTime.local()
76
-
77
- .set({ month: 7 })
78
-
79
- .plus({ year: 1 })
80
-
81
- .toJSDate(),
82
-
83
- ),
84
-
85
- );
86
54
 
87
55
  }
88
56
 
@@ -106,33 +74,77 @@
106
74
 
107
75
  const [startAt, setStartAt] = useState(
108
76
 
109
- startOfMonth(
77
+ startOfMonth(
110
78
 
111
- DateTime.local()
79
+ DateTime.local()
112
80
 
113
- .set({ month: 8 })
81
+ .set({ month: 8 })
114
82
 
115
- .toJSDate(),
83
+ .toJSDate(),
116
84
 
117
- ),
85
+ ),
86
+
87
+ );
88
+
89
+ const [endAt, setEndAt] = useState(
90
+
91
+ endOfMonth(
92
+
93
+ DateTime.local()
94
+
95
+ .set({ month: 7 })
96
+
97
+ .plus({ year: 1 })
98
+
99
+ .toJSDate(),
100
+
101
+ ),
102
+
103
+ );
104
+
105
+ const nowMonth =
106
+
107
+ DateTime.local()
108
+
109
+ .toJSDate()
110
+
111
+ .getMonth() + 1;
112
+
113
+
114
+
115
+ if (1 <= nowMonth && nowMonth <= 7) {
116
+
117
+ setStartAt(
118
+
119
+ DateTime.local()
120
+
121
+ .set({ month: 8 })
122
+
123
+ .minus({ year: 1 })
124
+
125
+ .toJSDate(),
118
126
 
119
127
  );
120
128
 
121
- const [endAt, setEndAt] = useState(
129
+ setEndAt(
122
130
 
123
- endOfMonth(
131
+ DateTime.local()
124
132
 
125
- DateTime.local()
133
+ .set({ month: 7 })
126
134
 
127
- .set({ month: 7 })
128
-
129
- .plus({ year: 1 })
130
-
131
- .toJSDate(),
135
+ .toJSDate(),
132
-
133
- ),
134
136
 
135
137
  );
138
+
139
+ }
140
+
141
+ return(
142
+
143
+ <input type='month value={strtAt}/>
144
+
145
+ <input type='month value={endAt}/>
146
+
147
+ )
136
148
 
137
149
  }
138
150