質問編集履歴

2

エラー発生タイミングの追加、行弁号の削除

2018/05/05 08:52

投稿

yatty
yatty

スコア11

test CHANGED
File without changes
test CHANGED
@@ -2,12 +2,14 @@
2
2
 
3
3
  現在reactの学習をしています。
4
4
 
5
- 作成したTodoアプリにreact-reduxを導入しようとしたところ、発生したTypeErrorが解決できず困ってます。
5
+ 作成したTodoアプリにreact-reduxを導入しようとしたところ、発生したTypeErrorが解決できず困っております。
6
6
 
7
7
 
8
8
 
9
9
  ### 発生している問題・エラーメッセージ
10
10
 
11
+ エラー発生のタイミングは初期表示時です。
12
+
11
13
 
12
14
 
13
15
  ```
@@ -24,211 +26,211 @@
24
26
 
25
27
  ```javascript
26
28
 
27
- 1 import React from 'react';
28
-
29
- 2
30
-
31
- 3 export default function TodoApp({ task, tasks, inputTask, addTask }) {
32
-
33
- 4 return (
34
-
35
- 5 <div>
36
-
37
- 6 <input type="text" onChange={(e) => inputTask(e.target.value)} />
38
-
39
- 7 <input type="button" value="add" onClick={() => addTask(task)} />
40
-
41
- 8 <ul>
42
-
43
- 9 {
44
-
45
- 10 tasks.map(function(item, i) {
46
-
47
- 11 return (
48
-
49
- 12 <li key={i}>{item}</li>
50
-
51
- 13 );
52
-
53
- 14 })
54
-
55
- 15 }
56
-
57
- 16 </ul>
58
-
59
- 17 </div>
60
-
61
- 18 );
62
-
63
- 19 }
64
-
65
- ```
66
-
67
-
68
-
69
- ```javascript
70
-
71
- 1 import { connect } from 'react-redux';
72
-
73
- 2 import TodoApp from '../components/TodoApp';
74
-
75
- 3 import { inputTask, addTask } from '../actions/tasks';
76
-
77
- 4
78
-
79
- 5 function mapStateToProps({ task, tasks }) {
80
-
81
- 6 return {
82
-
83
- 7 task,
84
-
85
- 8 tasks
86
-
87
- 9 };
88
-
89
- 10 }
90
-
91
- 11
92
-
93
- 12 function mapDispatchToProps(dispatch) {
94
-
95
- 13 return {
96
-
97
- 14 addTask(task) {
98
-
99
- 15 dispatch(addTask(task));
100
-
101
- 16 },
102
-
103
- 17 inputTask(task) {
104
-
105
- 18 dispatch(inputTask(task))
106
-
107
- 19 }
108
-
109
- 20 };
110
-
111
- 21 }
112
-
113
- 22
114
-
115
- 23 export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);
116
-
117
- ```
118
-
119
-
120
-
121
- ```javascript
122
-
123
- 1 import React from 'react';
124
-
125
- 2 import { Provider } from 'react-redux';
126
-
127
- 3 import { createStore } from 'redux';
128
-
129
- 4 import { render } from 'react-dom';
130
-
131
- 5 import tasksReducer from './reducers/tasks';
132
-
133
- 6 import TodoApp from './components/TodoApp';
134
-
135
- 7
136
-
137
- 8 const store = createStore(tasksReducer);
138
-
139
- 9
140
-
141
- 10 render(
142
-
143
- 11 <Provider store={store}>
144
-
145
- 12 <TodoApp />
146
-
147
- 13 </Provider>,
148
-
149
- 14 document.getElementById('root')
150
-
151
- 15 );
152
-
153
- ```
154
-
155
-
156
-
157
- ```javascript
158
-
159
- 1 const initialState = {
160
-
161
- 2 task: '',
162
-
163
- 3 tasks: [ ]
164
-
165
- 4 };
166
-
167
- 5
168
-
169
- 6 export default function tasksReducer(state = initialState, action) {
170
-
171
- 7 switch(action.type) {
172
-
173
- 8 case 'INPUT_TASK':
174
-
175
- 9 return {
176
-
177
- 10 ...state,
178
-
179
- 11 task: action.payload.task
180
-
181
- 12 };
182
-
183
- 13 case 'ADD_TASK':
184
-
185
- 14 return {
186
-
187
- 15 ...state,
188
-
189
- 16 tasks: state.tasks.concat([action.payload.task])
190
-
191
- 17 };
192
-
193
- 18 default:
194
-
195
- 19 return state;
196
-
197
- 20 }
198
-
199
- 21 }
200
-
201
- ```
202
-
203
-
204
-
205
- ```javascript
206
-
207
- 1 export const inputTask = (task) => ({
208
-
209
- 2 type: 'INPUT_TASK',
210
-
211
- 3 payload: {
212
-
213
- 4 task
214
-
215
- 5 }
216
-
217
- 6 });
218
-
219
- 7
220
-
221
- 8 export const addTask = (task) => ({
222
-
223
- 9 type: 'ADD_TASK',
224
-
225
- 10 payload: {
226
-
227
- 11 task
228
-
229
- 12 }
230
-
231
- 13 });
29
+ import React from 'react';
30
+
31
+
32
+
33
+ export default function TodoApp({ task, tasks, inputTask, addTask }) {
34
+
35
+ return (
36
+
37
+ <div>
38
+
39
+ <input type="text" onChange={(e) => inputTask(e.target.value)} />
40
+
41
+ <input type="button" value="add" onClick={() => addTask(task)} />
42
+
43
+ <ul>
44
+
45
+ {
46
+
47
+ tasks.map(function(item, i) {
48
+
49
+ return (
50
+
51
+ <li key={i}>{item}</li>
52
+
53
+ );
54
+
55
+ })
56
+
57
+ }
58
+
59
+ </ul>
60
+
61
+ </div>
62
+
63
+ );
64
+
65
+ }
66
+
67
+ ```
68
+
69
+
70
+
71
+ ```javascript
72
+
73
+ import { connect } from 'react-redux';
74
+
75
+ import TodoApp from '../components/TodoApp';
76
+
77
+ import { inputTask, addTask } from '../actions/tasks';
78
+
79
+
80
+
81
+ function mapStateToProps({ task, tasks }) {
82
+
83
+ return {
84
+
85
+ task,
86
+
87
+ tasks
88
+
89
+ };
90
+
91
+ }
92
+
93
+
94
+
95
+ function mapDispatchToProps(dispatch) {
96
+
97
+ return {
98
+
99
+ addTask(task) {
100
+
101
+ dispatch(addTask(task));
102
+
103
+ },
104
+
105
+ inputTask(task) {
106
+
107
+ dispatch(inputTask(task))
108
+
109
+ }
110
+
111
+ };
112
+
113
+ }
114
+
115
+
116
+
117
+ export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);
118
+
119
+ ```
120
+
121
+
122
+
123
+ ```javascript
124
+
125
+ import React from 'react';
126
+
127
+ import { Provider } from 'react-redux';
128
+
129
+ import { createStore } from 'redux';
130
+
131
+ import { render } from 'react-dom';
132
+
133
+ import tasksReducer from './reducers/tasks';
134
+
135
+ import TodoApp from './components/TodoApp';
136
+
137
+
138
+
139
+ const store = createStore(tasksReducer);
140
+
141
+
142
+
143
+ render(
144
+
145
+ <Provider store={store}>
146
+
147
+ <TodoApp />
148
+
149
+ </Provider>,
150
+
151
+ document.getElementById('root')
152
+
153
+ );
154
+
155
+ ```
156
+
157
+
158
+
159
+ ```javascript
160
+
161
+ const initialState = {
162
+
163
+ task: '',
164
+
165
+ tasks: [ ]
166
+
167
+ };
168
+
169
+
170
+
171
+ export default function tasksReducer(state = initialState, action) {
172
+
173
+ switch(action.type) {
174
+
175
+ case 'INPUT_TASK':
176
+
177
+ return {
178
+
179
+ ...state,
180
+
181
+ task: action.payload.task
182
+
183
+ };
184
+
185
+ case 'ADD_TASK':
186
+
187
+ return {
188
+
189
+ ...state,
190
+
191
+ tasks: state.tasks.concat([action.payload.task])
192
+
193
+ };
194
+
195
+ default:
196
+
197
+ return state;
198
+
199
+ }
200
+
201
+ }
202
+
203
+ ```
204
+
205
+
206
+
207
+ ```javascript
208
+
209
+ export const inputTask = (task) => ({
210
+
211
+ type: 'INPUT_TASK',
212
+
213
+ payload: {
214
+
215
+ task
216
+
217
+ }
218
+
219
+ });
220
+
221
+
222
+
223
+ export const addTask = (task) => ({
224
+
225
+ type: 'ADD_TASK',
226
+
227
+ payload: {
228
+
229
+ task
230
+
231
+ }
232
+
233
+ });
232
234
 
233
235
  ```
234
236
 
@@ -245,3 +247,7 @@
245
247
 
246
248
 
247
249
  ②tasksが正しく渡されていないのが原因と考え、mapStateToPropsを確認し、returnのカッコを()から{}に修正
250
+
251
+
252
+
253
+ ③state.tasksの初期設定にからの配列が入れられていることを確認

1

src/reducers/tasks.jsとsrc/actions/tasks.jsの追加

2018/05/05 08:52

投稿

yatty
yatty

スコア11

test CHANGED
File without changes
test CHANGED
@@ -154,6 +154,86 @@
154
154
 
155
155
 
156
156
 
157
+ ```javascript
158
+
159
+ 1 const initialState = {
160
+
161
+ 2 task: '',
162
+
163
+ 3 tasks: [ ]
164
+
165
+ 4 };
166
+
167
+ 5
168
+
169
+ 6 export default function tasksReducer(state = initialState, action) {
170
+
171
+ 7 switch(action.type) {
172
+
173
+ 8 case 'INPUT_TASK':
174
+
175
+ 9 return {
176
+
177
+ 10 ...state,
178
+
179
+ 11 task: action.payload.task
180
+
181
+ 12 };
182
+
183
+ 13 case 'ADD_TASK':
184
+
185
+ 14 return {
186
+
187
+ 15 ...state,
188
+
189
+ 16 tasks: state.tasks.concat([action.payload.task])
190
+
191
+ 17 };
192
+
193
+ 18 default:
194
+
195
+ 19 return state;
196
+
197
+ 20 }
198
+
199
+ 21 }
200
+
201
+ ```
202
+
203
+
204
+
205
+ ```javascript
206
+
207
+ 1 export const inputTask = (task) => ({
208
+
209
+ 2 type: 'INPUT_TASK',
210
+
211
+ 3 payload: {
212
+
213
+ 4 task
214
+
215
+ 5 }
216
+
217
+ 6 });
218
+
219
+ 7
220
+
221
+ 8 export const addTask = (task) => ({
222
+
223
+ 9 type: 'ADD_TASK',
224
+
225
+ 10 payload: {
226
+
227
+ 11 task
228
+
229
+ 12 }
230
+
231
+ 13 });
232
+
233
+ ```
234
+
235
+
236
+
157
237
  ### 試したこと
158
238
 
159
239