前提・実現したいこと
現在reactの学習をしています。
作成したTodoアプリにreact-reduxを導入しようとしたところ、発生したTypeErrorが解決できず困っております。
発生している問題・エラーメッセージ
エラー発生のタイミングは初期表示時です。
TypeError: Cannot read property 'map' of undefined
該当のソースコード
javascript
1import React from 'react'; 2 3export default function TodoApp({ task, tasks, inputTask, addTask }) { 4 return ( 5 <div> 6 <input type="text" onChange={(e) => inputTask(e.target.value)} /> 7 <input type="button" value="add" onClick={() => addTask(task)} /> 8 <ul> 9 { 10 tasks.map(function(item, i) { 11 return ( 12 <li key={i}>{item}</li> 13 ); 14 }) 15 } 16 </ul> 17 </div> 18 ); 19}
javascript
1import { connect } from 'react-redux'; 2import TodoApp from '../components/TodoApp'; 3import { inputTask, addTask } from '../actions/tasks'; 4 5function mapStateToProps({ task, tasks }) { 6 return { 7 task, 8 tasks 9 }; 10} 11 12function mapDispatchToProps(dispatch) { 13 return { 14 addTask(task) { 15 dispatch(addTask(task)); 16 }, 17 inputTask(task) { 18 dispatch(inputTask(task)) 19 } 20 }; 21} 22 23export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);
javascript
1import React from 'react'; 2import { Provider } from 'react-redux'; 3import { createStore } from 'redux'; 4import { render } from 'react-dom'; 5import tasksReducer from './reducers/tasks'; 6import TodoApp from './components/TodoApp'; 7 8const store = createStore(tasksReducer); 9 10render( 11 <Provider store={store}> 12 <TodoApp /> 13 </Provider>, 14 document.getElementById('root') 15);
javascript
1const initialState = { 2 task: '', 3 tasks: [ ] 4}; 5 6export default function tasksReducer(state = initialState, action) { 7 switch(action.type) { 8 case 'INPUT_TASK': 9 return { 10 ...state, 11 task: action.payload.task 12 }; 13 case 'ADD_TASK': 14 return { 15 ...state, 16 tasks: state.tasks.concat([action.payload.task]) 17 }; 18 default: 19 return state; 20 } 21}
javascript
1export const inputTask = (task) => ({ 2 type: 'INPUT_TASK', 3 payload: { 4 task 5 } 6}); 7 8export const addTask = (task) => ({ 9 type: 'ADD_TASK', 10 payload: { 11 task 12 } 13});
試したこと
①TypeErrorの内容を再確認
参考:https://qiita.com/nakamaru/items/3e11bb5b0d586a6d5545
②tasksが正しく渡されていないのが原因と考え、mapStateToPropsを確認し、returnのカッコを()から{}に修正
③state.tasksの初期設定にからの配列が入れられていることを確認
回答1件
あなたの回答
tips
プレビュー