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

編集履歴

質問編集履歴

2

文章訂正

2022/01/02 15:03

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -28,75 +28,169 @@
28
28
 
29
29
  ```
30
30
 
31
- //TodoItem.js
31
+ //src/components/DisplayTodos.js
32
-
33
-
34
-
32
+
33
+
34
+
35
- import React, { useRef } from "react";
35
+ import React, { useState } from "react";
36
-
37
-
38
-
39
- const Todoitem = (props) => {
36
+
40
-
37
+
38
+
41
- const { item, updateTodo, removeTodo, completeTodo } = props;
39
+ import { connect } from "react-redux";
40
+
42
-
41
+ import {
42
+
43
-
43
+ addTodos,
44
+
44
-
45
+ completeTodos,
46
+
47
+ removeTodos,
48
+
49
+ updateTodos,
50
+
45
- const inputRef = useRef(true);
51
+ } from "../redux/reducer";
46
-
47
-
48
-
52
+
53
+
54
+
49
- const changeFocus = () => {
55
+ const mapStateToProps = (state) => {
56
+
50
-
57
+ return {
58
+
51
- inputRef.current.disabled = false;
59
+ todos: state,
52
-
53
- inputRef.current.focus();
54
60
 
55
61
  };
56
62
 
63
+ };
64
+
65
+
66
+
57
- const update = (id, value, e) => {
67
+ const mapDispatchToProps = (dispatch) => {
68
+
58
-
69
+ return {
70
+
59
- if (e.which === 13) {
71
+ addTodo: (obj) => dispatch(addTodos(obj)),
72
+
60
-
73
+ removeTodo: (id) => dispatch(removeTodos(id)),
74
+
61
- updateTodo({ id, item: value });
75
+ updateTodo: (obj) => dispatch(updateTodos(obj)),
62
-
76
+
63
- inputRef.current.disabled = true;
77
+ completeTodo: (obj) => dispatch(completeTodos(obj)),
64
-
65
- }
66
78
 
67
79
  };
68
80
 
81
+ };
82
+
83
+
84
+
85
+ const DisplayTodos = (props) => {
86
+
87
+ const [sort, setSort] = useState("active");
88
+
69
89
  return (
70
90
 
71
- <li key={item.id} className="card">
91
+ <div className="displaytodos">
72
-
73
- <textarea
92
+
74
-
75
- ref={inputRef}
76
-
77
- disabled={inputRef}
78
-
79
- defaultValue={item.item}
80
-
81
- onKeyPress={(e) => update(item.id, inputRef.current.value, e)}
82
-
83
- />
84
-
85
- <div className="btns">
93
+ <div className="buttons">
86
-
87
- <button onClick={() => changeFocus()}>編集</button>
94
+
88
-
89
- <button onClick={() => completeTodo(item.id)}>完了</button>
95
+ <button onClick={() => setSort("active")}>Active</button>
96
+
90
-
97
+ <button onClick={() => setSort("completed")}>Completed</button>
98
+
91
- <button onClick={() => removeTodo(item.id)}>削除</button>
99
+ <button onClick={() => setSort("all")}>All</button>
92
-
93
- {""}
94
100
 
95
101
  </div>
96
102
 
103
+ <ol>
104
+
105
+ {props.todos.length > 0 && sort === "active"
106
+
107
+ ? props.todos.map((item) => {
108
+
109
+ return (
110
+
111
+ item.completed === false && (
112
+
113
+ <TodoItem
114
+
115
+ key={item.id}
116
+
117
+ item={item}
118
+
119
+ removeTodo={props.removeTodo}
120
+
121
+ updataTodo={props.updataTodo}
122
+
123
+ completeTodo={props.completeTodo}
124
+
125
+ />
126
+
127
+ )
128
+
129
+ );
130
+
131
+ })
132
+
133
+ : null}
134
+
97
- {item.completed && <span className="completed">done</span>}
135
+ {props.todos.length > 0 && sort === "completed"
136
+
98
-
137
+ ? props.todos.map((item) => {
138
+
139
+ return (
140
+
141
+ item.completed === true && (
142
+
143
+ <TodoItem
144
+
145
+ key={item.id}
146
+
147
+ item={item}
148
+
149
+ removeTodo={props.removeTodo}
150
+
151
+ updataTodo={props.updataTodo}
152
+
153
+ completeTodo={props.completeTodo}
154
+
155
+ />
156
+
157
+ )
158
+
159
+ );
160
+
161
+ })
162
+
163
+ : null}
164
+
165
+ {props.todos.length > 0 && sort === "all"
166
+
167
+ ? props.todos.map((item) => {
168
+
169
+ return (
170
+
171
+ <TodoItem
172
+
173
+ key={item.id}
174
+
175
+ item={item}
176
+
177
+ removeTodo={props.removeTodo}
178
+
179
+ updataTodo={props.updataTodo}
180
+
181
+ completeTodo={props.completeTodo}
182
+
183
+ />
184
+
185
+ );
186
+
187
+ })
188
+
189
+ : null}
190
+
191
+ </ol>
192
+
99
- </li>
193
+ </div>
100
194
 
101
195
  );
102
196
 
@@ -104,6 +198,8 @@
104
198
 
105
199
 
106
200
 
107
- export default Todoitem;
201
+ export default connect(mapStateToProps, mapDispatchToProps)(DisplayTodos);
202
+
203
+
108
204
 
109
205
  ```

1

文章訂正

2022/01/02 15:03

投稿

edu
edu

スコア35

test CHANGED
@@ -1 +1 @@
1
- 【React】エラー表示 『Attempted import error: 'auth' is not exported from '../firebase'.』を改善したい
1
+ 【React】エラー表示 『'TodoItem' is not defined.』を改善したい
test CHANGED
@@ -1,14 +1,14 @@
1
- reactで、Firebaseを使い、認証機能を作成しています。
1
+ reactで、reduxを使い、todolistを作成しています。
2
2
 
3
3
 
4
4
 
5
- **『Attempted import error: 'auth' is not exported from '../firebase'.』 という表示を改善したいです。**
5
+ **『'TodoItem' is not defined』 という表示を改善したいです。**
6
6
 
7
7
 
8
8
 
9
9
  **試したこと**
10
10
 
11
- 『attempted import error: 'auth' is not exported from '../firebase'. v9』
11
+ 『'TodoItem' is not defined』
12
12
 
13
13
  上記のエラー文を検索して、表示されたサイトに書いてある改善方法を実行したが、改善しませんでした。
14
14
 
@@ -22,162 +22,88 @@
22
22
 
23
23
 
24
24
 
25
- ```
26
25
 
27
- //ディレクトリ構成
28
-
29
-
30
-
31
- src
32
-
33
- ├── auth
34
-
35
- ├── AuthProvider.js
36
-
37
- └── Login.js
38
-
39
- └── PrivateRoute.js
40
-
41
- └── SignUp.js
42
-
43
- ├── components
44
-
45
- ├── firebase.js
46
-
47
- ├── App.js
48
-
49
- ```
50
26
 
51
27
 
52
28
 
53
29
  ```
54
30
 
55
- //AuthProvider.js
31
+ //TodoItem.js
56
32
 
57
33
 
58
34
 
59
- import React, { useEffect, useState } from "react";
35
+ import React, { useRef } from "react";
60
-
61
- import { auth } from "./firebase";
62
36
 
63
37
 
64
38
 
65
- const AuthContext = React.createContext();
39
+ const Todoitem = (props) => {
40
+
41
+ const { item, updateTodo, removeTodo, completeTodo } = props;
66
42
 
67
43
 
68
44
 
69
- const AuthProvider = ({ children }) => {
70
-
71
- const [currentUser, setCurrentUser] = useState(null);
45
+ const inputRef = useRef(true);
72
46
 
73
47
 
74
48
 
75
- //サインアップ後認証情報を更新
49
+ const changeFocus = () => {
76
50
 
77
- const signup = async (email, password, history) => {
51
+ inputRef.current.disabled = false;
78
52
 
79
- try {
53
+ inputRef.current.focus();
80
54
 
81
- await auth.createUserWithEmailAndPassword(email, password);
55
+ };
82
56
 
83
- auth.onAuthStateChanged((user) => setCurrentUser(user));
57
+ const update = (id, value, e) => {
84
58
 
85
- history.push("/");
59
+ if (e.which === 13) {
86
60
 
87
- } catch (error) {
61
+ updateTodo({ id, item: value });
88
62
 
89
- alert(error);
63
+ inputRef.current.disabled = true;
90
64
 
91
65
  }
92
66
 
93
67
  };
94
68
 
95
-
96
-
97
- //ログインさせる
98
-
99
- const login = async (email, password, history) => {
100
-
101
- try {
102
-
103
- await auth.signInWithEmailAndPassword(email, password);
104
-
105
- auth.onAuthStateChanged((user) => setCurrentUser(user));
106
-
107
- history.push("/");
108
-
109
- } catch (error) {
110
-
111
- alert(error);
112
-
113
- }
114
-
115
- };
116
-
117
-
118
-
119
- //初回アクセス時に認証済みかチェック
120
-
121
- useEffect(() => {
122
-
123
- auth.onAuthStateChanged(setCurrentUser);
124
-
125
- }, []);
126
-
127
-
128
-
129
69
  return (
130
70
 
131
- <AuthContext.Provider value={{ signup, login, currentUser }}>
71
+ <li key={item.id} className="card">
132
72
 
133
- {children}
73
+ <textarea
134
74
 
75
+ ref={inputRef}
76
+
77
+ disabled={inputRef}
78
+
79
+ defaultValue={item.item}
80
+
81
+ onKeyPress={(e) => update(item.id, inputRef.current.value, e)}
82
+
83
+ />
84
+
85
+ <div className="btns">
86
+
87
+ <button onClick={() => changeFocus()}>編集</button>
88
+
89
+ <button onClick={() => completeTodo(item.id)}>完了</button>
90
+
91
+ <button onClick={() => removeTodo(item.id)}>削除</button>
92
+
93
+ {""}
94
+
135
- </AuthContext.Provider>
95
+ </div>
96
+
97
+ {item.completed && <span className="completed">done</span>}
98
+
99
+ </li>
136
100
 
137
101
  );
138
102
 
139
103
  };
140
104
 
141
- export { AuthContext, AuthProvider };
142
105
 
143
106
 
107
+ export default Todoitem;
144
108
 
145
109
  ```
146
-
147
-
148
-
149
- ```
150
-
151
- //firebase.js
152
-
153
-
154
-
155
- import { initializeApp } from "firebase/app";
156
-
157
- import { getAuth } from "firebase/auth";
158
-
159
- import { getFirestore } from "firebase/firestore";
160
-
161
-
162
-
163
- const firebaseApp = initializeApp({
164
-
165
- apiKey: process.env.REACT_APP_FIREBASE_KEY,
166
-
167
- authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
168
-
169
- databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
170
-
171
- projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
172
-
173
- storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
174
-
175
- messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
176
-
177
- });
178
-
179
- export const firebaseAuth = getAuth(firebaseApp);
180
-
181
- export const firebaseFirestore = getFirestore(firebaseApp);
182
-
183
- ```