Reactアプリで「Cannot read property 'filter' of undefined」とエラーが出る

Question

前提・実現したいこと

React + Reduxでカレンダーアプリを作成していたところ、コンソールで下記のエラーが出ました。

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

TypeError: Cannot read property 'filter' of undefined

該当のソースコード

import { isSameDay } from "./calendar";

export const setSchedules = (calendar, schedules) =>
  calendar.map(c => ({
    date: c,
    schedules: schedules.filter(e => isSameDay(e.date, c))
  }));

import { createCalendar } from "../../services/calendar";
import { connect } from "react-redux";
import CalendarBoard from "./presentation";
import {
  addScheduleOpenDialog,
  addScheduleSetValue
} from "../../redux/addSchedule/actions";
import { setSchedules } from "../../services/schedule";

const mapDispatchToProps = dispatch => ({
  openAddScheduleDialog: d => {
    dispatch(addScheduleOpenDialog());
    dispatch(addScheduleSetValue({ date: d }));
  }
});

const mapStateToProps = state => ({
  calendar: state.calendar,
  schedules: state.schedules
});

const mergeProps = (stateProps, dispatchProps) => {
  const {
    calendar: month,
    schedules: { items: schedules }
  } = stateProps;

  const calendar = setSchedules(createCalendar(month), schedules);

  return {
    ...stateProps,
    ...dispatchProps,
    calendar,
    month
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
  mergeProps
)(CalendarBoard);

export const isSameDay = (d1, d2) => {
  const format = "YYYYMMDD";
  return d1.format(format) === d2.format(format);
};

import { SCHEDULES_ADD_ITEM } from "./actions";
import dayjs from "dayjs";

const init = {
items: [
{
id: 1,
title: "テストtitle",
date: dayjs(),
location: "テストlocation",
description: "テストdescription"
}
],
isLoading: false
};

const schedulesReducer = (state = init, action) => {
const { type, payload } = action;

switch (type) {
case SCHEDULES_ADD_ITEM:
return {
...state,
item: [...state.items, { ...payload, id: state.items.length + 1 }]
};
default:
return state;
}
};

export default schedulesReducer;

試したこと

schedulesが空ということだと思ったのですが、解決方法が分からず、、
怪しい箇所ありましたらご教示いただけますと幸いです。

よろしくお願いいたします。

Comments

[hoshi-takanori]

setSchedules で schedules.filter としているので、schedules が配列であることを期待してると思いますが、mergeProps では schedules: { items: schedules } としてオブジェクトを渡してますね。

[_3443_]

なるほどなるほど。
ありがとうございます。
配列の形に変換しようとするとどのような記述になるのでしょうか。
度々すみません。

Answer 1

空というかundefinedですね。
このコードだけだと何とも言えないので、setSchedulesを呼び出している箇所のコードを記載すると回答をもらいやすいと思います。

Comments

[_3443_]

早速ご回答いただきありがとうございます。
記載不足失礼いたしました。
先程更新いたしました。
お手隙でご確認いただけますと幸いでございます。

[markey]

ありがとうございます。mergePropsの中で`schedules`という変数名が重複しているかもしれないので、こう変えてみるとどうでしょうか？

```js
const {
calendar: month,
schedules: { items }
} = stateProps;

const calendar = setSchedules(createCalendar(month), items);
```

[_3443_]

なるほど、、勉強になります。
しかしながら仰っていただいたとおりの記載にしたのですが、
エラーの内容は変わらず「Cannot read property 'filter' of undefined」となりました。
他に可能性のある箇所ございますでしょうか。
お時間いただき本当にありがとうございます。

[markey]

なるほどです。であれば`state.schedules.items`がそもそも存在するのか確認するという感じでしょうか。

[_3443_]

ありがとうございます。
なるほどなるほど。
現在itemsは仮のデータとして下記の実装を行っている状態です。

もう少し調べてみます。

```
import { SCHEDULES_ADD_ITEM } from "./actions";
import dayjs from "dayjs";

const init = {
items: [
{
id: 1,
title: "テストtitle",
date: dayjs(),
location: "テストlocation",
description: "テストdescription"
}
],
isLoading: false
};

const schedulesReducer = (state = init, action) => {
const { type, payload } = action;

switch (type) {
case SCHEDULES_ADD_ITEM:
return {
...state,
item: [...state.items, { ...payload, id: state.items.length + 1 }]
};
default:
return state;
}
};

export default schedulesReducer;
```

[markey]

今回の事象と関係があるかわかりませんが、reducerにtypoがあるかもしれません。
itemではなくitemsが正しい？

```
return {
...state,
item: [...state.items, { ...payload, id: state.items.length + 1 }]
}
```

[_3443_]

ご指摘ありがとうございます！
エラーの内容はあいにく変わりませんでしたが、おそらくtypoです。