todoアプリをの完了機能を実装したい。真偽値がうまく反映されない。

Question

前提・実現したいこと

completeにtrueを渡し、完了画面に完了したタスクを表示させたい。

発生している問題・エラーメッセージ

エラーは特に出ていないのですが、思い通りの挙動になりません。
action.typeをCOMPLETE_TASKにするとcompleteの値がtrueになることはconsole.logで確認したのですが、完了ボタンを押したときのApp.jsのconsole.log(state.eventsTask)のcompleteがfalseになっています。また、console.log(state.eventsTask.complete)としたところ、undefinedが出てきてしまいます。そのため、filterでstate.eventsTask.filter(event => event.complete === false)としても正しい挙動が起こらないのだと思います。
eventsTaskをconsole.logで見たところ、オブジェクトの型でcompleteがあるのにも関わらず、state.eventsTask.completeがundefinedである理由と、completeにfalseが渡ってきていない理由をご教授いただいたいです。
また、どうすれば解決できるのかも教えていただけると幸いです。

該当のソースコード

import React, { useState, useReducer } from 'react'
import DeleteButton from './deleteButton'
import reducer from './reducer'
import CompletedButton from './completedButton'
import TasksCompleted from './tasksCompleted'
import AppContext from './context/AppContext'

const App = () => {

  const initialState = {
    eventsTask: [],
    TaskCompleted: []
  }

  const [state, dispatch] = useReducer(reducer, initialState)
  const [taskName, setTaskName] = useState('')
  const [detail, setDetail] = useState('')
  const [complete, setComplete] = useState(false)

  //typeを決めるswitch

  //ボタンをクリックしたときにタスクを作成する関数
  const addTaskHandler = (e) => {
    e.preventDefault()
    dispatch({
      type: 'CREATE_TASK',
      taskName,
      detail,
      complete
    })
    console.log(state)
    setTaskName('')
    setDetail('')
    setComplete(false)
  }

  console.log(state.eventsTask)//ここでcompleteがfalseであること（COMPLETE_TASKにおいてtrueに変換したはず）
  console.log(state.eventsTask.complete)//ちゃんとオブジェクトの形になっているのに.completeがundefinedであることの二つが原因


  return (
    <>
      <AppContext.Provider value={{ state, dispatch }}>
        <h2>Todo Task</h2>
        <input type="text"
          value={taskName}
          onChange={e => setTaskName(e.target.value)} />
        <input type="text"
          value={detail}
          onChange={e => setDetail(e.target.value)} />
        <input type="button"
          value="タスクの作成"
          onClick={addTaskHandler} />
        <table>
          <thead>
            <tr>
              <th>タスク名</th>
              <th>タスクの詳細</th>
            </tr>
          </thead>
          <tbody>

            {state.eventsTask.filter(event => event.complete === false)
              .map((states, index) => (
                <tr key={index}>
                  <td>{states.taskName}</td>
                  <td>{states.detail}</td>
                  <td><CompletedButton state={states}
                    dispatch={dispatch}
                    setComplete={setComplete}
                    complete={complete} /></td>
                  <td><DeleteButton state={states} dispatch={dispatch} /></td>
                </tr>
              ))}

          </tbody>
        </table>
        <TasksCompleted state={state} dispatch={dispatch} />
      </AppContext.Provider>
    </>
  )
}


export default App

const eventsTask = (state = [], action) => {
    console.log(action.type)
    switch (action.type) {

        case 'CREATE_TASK':
            console.log([...state, { taskName: action.taskName, detail: action.detail, complete: action.complete }])
            return [...state, { taskName: action.taskName, detail: action.detail, complete: action.complete }]

        case 'DELETE_TASK':
            const stateDelete = state.filter(states => {
                console.log(states.taskName)
                console.log(action.task)
                return states.taskName !== action.task
            })
            console.log(stateDelete)
            return stateDelete


        case 'COMPLETE_TASK':
            //console.logで値の確認
            console.log(state.map((event) => {
                console.log({ ...event })
                if (event.taskName !== action.taskName) return event;
                return {
                    ...event,
                    complete: true
                }
            }))
            state.map((event) => {
                console.log({ ...event })
                if (event.taskName !== action.taskName) return event;
                return {
                    ...event,
                    complete: true
                }
            })
        default:
            return state
    }

}

export default eventsTask

import eventsTask from './eventsTask'

import { combineReducers } from 'redux'

export default combineReducers({ eventsTask })

試したこと

console.logでCOMPLETE_TASKが実行されたときの結果とeventsTaskとeventsTask.completeの値を確認した。

補足情報（FW/ツールのバージョンなど）

windows10

Comments

[hoshi-takanori]

case 'COMPLETE_TASK' の時に return してないような。

[yuiei]

ありがとうございます。
おっしゃる通りで、return()で囲ったら値がtrueで戻ってきました。助かりました。

Answer 1

returnで返すことで解決しました