teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問【React】エラー表示『styles' is not defined no-undef』を改善したい

編集履歴

質問編集履歴

2

文章訂正

2021/12/20 14:36

投稿

edu
edu

スコア35

test CHANGED
@@ -1 +1 @@
1
- 【React】エラー表示を改善したい
1
+ 【React】エラー表示『styles' is not defined no-undef』を改善したい
test CHANGED
File without changes

1

文章訂正

2021/12/20 14:36

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -1,12 +1,12 @@
1
- reactで認証機能のログイン機能を作成しています。
1
+ reactでwebフォームを作成しています。
2
-
3
-
4
-
2
+
3
+
4
+
5
- **『Module not found: Can't resolve './auth/Login'』という表示を改善したいです。**
5
+ **『'styles' is not defined no-undef'』という表示を改善したいです。**
6
-
7
-
8
-
6
+
7
+
8
+
9
- importもしていて、スペルも確認したのですが、改善しません。
9
+ importをしても、スペルも確認したのですが、改善しません。
10
10
 
11
11
  何方かアドバイスをお願いします。
12
12
 
@@ -14,9 +14,9 @@
14
14
 
15
15
  **試したこと**
16
16
 
17
- ①importやフォルダの位置の確認をした。
17
+ ① 'styles' is not defined no-undefで、検索をして、いろんなパターんのimportを試した。
18
-
19
- ②スペルの間違いないか確認をした。
18
+
19
+
20
20
 
21
21
 
22
22
 
@@ -26,9 +26,17 @@
26
26
 
27
27
 
28
28
 
29
- ./src/App.js
29
+ src/components/Basic.js
30
-
30
+
31
- Module not found: Can't resolve './auth/AuthProvider'
31
+ Line 24:26: 'styles' is not defined no-undef
32
+
33
+ Line 24:42: 'styles' is not defined no-undef
34
+
35
+ Line 25:21: 'styles' is not defined no-undef
36
+
37
+ Line 144:29: 'styles' is not defined no-undef
38
+
39
+ Line 144:45: 'styles' is not defined no-undef
32
40
 
33
41
  ```
34
42
 
@@ -36,152 +44,312 @@
36
44
 
37
45
  ```
38
46
 
39
- //src/App.js
47
+ //src/Basic.js
40
48
 
41
49
  import React from "react";
42
50
 
51
+
52
+
43
- import { Grid } from "@material-ui/core";
53
+ import { Link } from "react-router-dom";
54
+
44
-
55
+ import {
56
+
57
+ FormControl,
58
+
45
- import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
59
+ FormControlLabel,
60
+
46
-
61
+ FormLabel,
62
+
63
+ InputLabel,
64
+
65
+ Radio,
66
+
67
+ RadioGroup,
68
+
69
+ Select,
70
+
47
- import Header from "./components/Header";
71
+ } from "@mui/material";
48
-
49
- import Content from "./components/Content";
72
+
50
-
51
- import Login from "./auth/Login";
73
+ import { motion } from "framer-motion";
52
-
53
- import SignUp from "./auth/SignUp";
74
+
54
-
75
+
76
+
55
- import { AuthProvider } from "./auth/AuthProvider";
77
+ const Basic = ({ basicProfile, setBasicProfile, isConfirm }) => {
56
-
57
- import PrivateRoute from "./auth/PrivateRoute";
58
-
59
-
60
-
61
- function App() {
62
78
 
63
79
  return (
64
80
 
65
- <Grid container direction="column">
66
-
67
- <AuthProvider>
68
-
69
- <Router>
70
-
71
- <Switch>
72
-
73
- <PrivateRoute exact path="/" component={Content} />
74
-
75
- <PrivateRoute exact path="/" component={Header} />
76
-
77
- <Route exact path="/login" component={Login} />
78
-
79
- <Route exact path="/signup" component={SignUp} />
80
-
81
- </Switch>
82
-
83
- </Router>
84
-
85
- </AuthProvider>
86
-
87
- </Grid>
81
+ <>
82
+
83
+ <motion.div
84
+
85
+ initial={{ scaleY: 0 }}
86
+
87
+ animate={{ scaleY: 1 }}
88
+
89
+ exit={{ scaleY: 0 }}
90
+
91
+ transition={{ duration: 0.5 }}
92
+
93
+ >
94
+
95
+ <div style={{ ...styles.page, ...styles.Basic }}>
96
+
97
+ <p style={styles.copy}>お客様の情報を入力して下さい</p>
98
+
99
+ <div style={{ textAlign: "center" }}>
100
+
101
+ <FormControl component="fieldset">
102
+
103
+ <FormLabel component="gender">- 性別 -</FormLabel>
104
+
105
+ {isConfirm ? (
106
+
107
+ <span>{basicProfile?.gender === "male" ? "男性" : "女性"}</span>
108
+
109
+ ) : (
110
+
111
+ <RadioGroup
112
+
113
+ row
114
+
115
+ aria-label="gender"
116
+
117
+ name="row-radio-buttons-group"
118
+
119
+ value={basicProfile.gender}
120
+
121
+ onChange={(evt) =>
122
+
123
+ setBasicProfile((state) => {
124
+
125
+ return { ...state, gender: evt.target.value };
126
+
127
+ })
128
+
129
+ }
130
+
131
+ >
132
+
133
+ <FormControlLabel
134
+
135
+ value="male"
136
+
137
+ control={<Radio />}
138
+
139
+ label="男性"
140
+
141
+ />
142
+
143
+ <FormControlLabel
144
+
145
+ value="female"
146
+
147
+ control={<Radio />}
148
+
149
+ label="女性"
150
+
151
+ />
152
+
153
+ </RadioGroup>
154
+
155
+ )}
156
+
157
+ </FormControl>
158
+
159
+ </div>
160
+
161
+ <div style={{ textAlign: "center" }}>
162
+
163
+ <FormLabel component="legend">- 生年月日 -</FormLabel>
164
+
165
+ <FormControl sx={{ m: 1, minWidth: 120 }}>
166
+
167
+ <InputLabel htmlFor="grouped-native-select">year</InputLabel>
168
+
169
+ {isConfirm ? (
170
+
171
+ <span>{basicProfile.year}</span>
172
+
173
+ ) : (
174
+
175
+ <Select
176
+
177
+ native
178
+
179
+ defaultValue=""
180
+
181
+ id="grouped-native-select"
182
+
183
+ label="Grouping"
184
+
185
+ value={basicProfile.year}
186
+
187
+ onChange={(evt) =>
188
+
189
+ setBasicProfile((state) => {
190
+
191
+ return { ...state, year: evt.target.value };
192
+
193
+ })
194
+
195
+ }
196
+
197
+ >
198
+
199
+ <option aria-label="None" value="" />
200
+
201
+ <optgroup label="year">
202
+
203
+ {Array.from(Array(2020), (_, num) => (
204
+
205
+ <option key={num} value={num + 1990}>
206
+
207
+ {num + 1990}
208
+
209
+ </option>
210
+
211
+ ))}
212
+
213
+ </optgroup>
214
+
215
+ </Select>
216
+
217
+ )}
218
+
219
+ </FormControl>
220
+
221
+ <FormControl sx={{ m: 1, minWidth: 120 }}>
222
+
223
+ <InputLabel htmlFor="grouped-native-select">month</InputLabel>
224
+
225
+ {isConfirm ? (
226
+
227
+ <span>{basicProfile.month}</span>
228
+
229
+ ) : (
230
+
231
+ <Select
232
+
233
+ native
234
+
235
+ defaultValue=""
236
+
237
+ id="grouped-native-select"
238
+
239
+ label="Grouping"
240
+
241
+ value={basicProfile.month}
242
+
243
+ onChange={(evt) =>
244
+
245
+ setBasicProfile((state) => {
246
+
247
+ return { ...state, month: evt.target.value };
248
+
249
+ })
250
+
251
+ }
252
+
253
+ >
254
+
255
+ <option aria-label="None" value="" />
256
+
257
+ <optgroup label="month">
258
+
259
+ {Array.from(Array(12), (_, num) => (
260
+
261
+ <option key={num} value={num + 1}>
262
+
263
+ {num + 1}
264
+
265
+ </option>
266
+
267
+ ))}
268
+
269
+ </optgroup>
270
+
271
+ </Select>
272
+
273
+ )}
274
+
275
+ </FormControl>
276
+
277
+ <FormControl sx={{ m: 1, minWidth: 120 }}>
278
+
279
+ <InputLabel htmlFor="grouped-native-select">day</InputLabel>
280
+
281
+ {isConfirm ? (
282
+
283
+ <span>{basicProfile.day}</span>
284
+
285
+ ) : (
286
+
287
+ <Select
288
+
289
+ native
290
+
291
+ defaultValue=""
292
+
293
+ id="grouped-native-select"
294
+
295
+ label="Grouping"
296
+
297
+ value={basicProfile.day}
298
+
299
+ onChange={(evt) =>
300
+
301
+ setBasicProfile((state) => {
302
+
303
+ return { ...state, day: evt.target.value };
304
+
305
+ })
306
+
307
+ }
308
+
309
+ >
310
+
311
+ <option aria-label="None" value="" />
312
+
313
+ <optgroup label="day">
314
+
315
+ {Array.from(Array(31), (_, num) => (
316
+
317
+ <option key={num} value={num + 1}>
318
+
319
+ {num + 1}
320
+
321
+ </option>
322
+
323
+ ))}
324
+
325
+ </optgroup>
326
+
327
+ </Select>
328
+
329
+ )}
330
+
331
+ </FormControl>
332
+
333
+ </div>
334
+
335
+ <Link style={{ ...styles.copy, ...styles.link }} to="/Questionnaire">
336
+
337
+ 次へ
338
+
339
+ </Link>
340
+
341
+ </div>
342
+
343
+ </motion.div>
344
+
345
+ </>
88
346
 
89
347
  );
90
348
 
91
- }
349
+ };
92
-
350
+
351
+
352
+
93
- export default App;
353
+ export default Basic;
94
354
 
95
355
  ```
96
-
97
- ```
98
-
99
- //src/auth/AuthProvider.js
100
-
101
- import React, { useEffect, useState } from "react";
102
-
103
- import { auth } from "./firebase";
104
-
105
-
106
-
107
- const AuthContext = React.createContext();
108
-
109
-
110
-
111
- const AuthProvider = ({ children }) => {
112
-
113
- const [currentUser, setCurrentUser] = useState(null);
114
-
115
-
116
-
117
- //サインアップ後認証情報を更新
118
-
119
- const signup = async (email, password, history) => {
120
-
121
- try {
122
-
123
- await auth.createUserWithEmailAndPassword(email, password);
124
-
125
- auth.onAuthStateChanged((user) => setCurrentUser(user));
126
-
127
- history.push("/");
128
-
129
- } catch (error) {
130
-
131
- alert(error);
132
-
133
- }
134
-
135
- };
136
-
137
-
138
-
139
- //ログインさせる
140
-
141
- const login = async (email, password, history) => {
142
-
143
- try {
144
-
145
- await auth.signInWithEmailAndPassword(email, password);
146
-
147
- auth.onAuthStateChanged((user) => setCurrentUser(user));
148
-
149
- history.push("/");
150
-
151
- } catch (error) {
152
-
153
- alert(error);
154
-
155
- }
156
-
157
- };
158
-
159
-
160
-
161
- //初回アクセス時に認証済みかチェック
162
-
163
- useEffect(() => {
164
-
165
- auth.onAuthStateChanged(setCurrentUser);
166
-
167
- }, []);
168
-
169
-
170
-
171
- return (
172
-
173
- <AuthContext.Provider value={{ signup, login, currentUser }}>
174
-
175
- {children}
176
-
177
- </AuthContext.Provider>
178
-
179
- );
180
-
181
- };
182
-
183
-
184
-
185
- export { AuthContext, AuthProvider };
186
-
187
- ```