× TypeError: tasks.map is not a function

Question

React初心者です

mapメソッドが定義されていないとのエラーなのですが、

taskが渡されていて、なぜマップメソッドが反応しないのかがわかりません、、、

TaskList.js

import React from 'react'
import {useSelector} from 'react-redux'
import {selectTasks} from './taskSlice'
import TaskItem from './TaskItem'

const TaskList = () => {
  const tasks = useSelector(selectTasks)
  return (
    <div>
      {tasks.map((task) => (
      <TaskItem key={task.id} task={task}/>
      ))}
    </div>
  )
}

export default TaskList

TaskItem.js

import React from 'react'
import {useDispatch} from 'react-redux'
import {completeTask, deleteTask} from "./taskSlice"

const TaskItem = ({task}) => {
  const dispatch = useDispatch()

  return (
    <div>
      <input type="checkbox"
      onClick = {() =>dispatch(completeTask(task))}
      defaultChecked={task.completed}
      />
      <span>{task.title}</span>
      <button onClick = {() =>dispatch(deleteTask(task))}>delete</button>
    </div>
  )
}

export default TaskItem

taskSlice.js

import { createSlice } from '@reduxjs/toolkit';

export const taskSlice = createSlice({
  name: 'task',
  initialState: {
    idCounter:{
      idCount: 3,
    },
    tasks: [
      {id: 1, title: 'TASK A',completed: false}, 
      {id: 2, title: 'TASK C',completed: false}, 
      {id: 3, title: 'TASK C',completed: false}, 
    ]
  },
  reducers: {
    newTask: (state, action) => {
      state.idCount  ++;
      const newItem ={
        id: state.idCount,
        title: action.payload,
        completed: false
      };
      state.tasks = [newItem ,...state.tasks];
    },

    completeTask: (state,action) => {
      const task = state.tasks.find((t) => t.di === action.payload.id)
      if(task){
        task.completed = !true.completed;
      }
    },
    deleteTask: (state,action) => {
      state.tasks += state.tasks.filter((t) =>t.id !== action.payload.id);
    },
  },
});

export const { newTask, completeTask, deleteTask } = taskSlice.actions;

export const selectTasks = (state) => state.task.tasks;

export default taskSlice.reducer;

Answer 1

こんにちは。selectTasks をexportしている行を、以下のように修正すると、いかがでしょうか？

- export const selectTasks = (state) => state.task.value;
+ export const selectTasks = (state) => state.task.tasks;

Comments

[tomsuma]

ご回答ありがとうございます！
試したところ、
デリートボタンを押したらエラーが起こるようになりました、、

[jun68ykt]

どういたしまして。

> 試したところ、
> デリートボタンを押したらエラーが起こるようになりました、、

ということは、このご質問のタイトルにある

Cannot read property 'map' of undefined

というエラーは発生しなくなった、ということでしょうか？

[tomsuma]

失礼しました
はい、違うエラーに変わりました

[jun68ykt]

なるほどですね。このご質問のエラーが解消されたのであれば、いったんこのご質問は解決済みにして、次の問題の
> デリートボタンを押したらエラーが起こるようになりました、、
については、その際のエラーメッセージなどを記載のうえ、新たなご質問として投稿されるとよいかと思います。

[tomsuma]

かしこまりました
ありがとうございます！

[jun68ykt]

どういたしまして。
> デリートボタンを押したらエラー
の件でご質問が投稿されたらまた拝読し、回答できそうなら回答しますねー