質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2053閲覧

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

_3443_

総合スコア5

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/05/31 02:48

編集2020/05/31 04:35

前提・実現したいこと

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

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

TypeError: Cannot read property 'filter' of undefined

該当のソースコード

js

1import { isSameDay } from "./calendar"; 2 3export const setSchedules = (calendar, schedules) => 4 calendar.map(c => ({ 5 date: c, 6 schedules: schedules.filter(e => isSameDay(e.date, c)) 7 }));

js

1import { createCalendar } from "../../services/calendar"; 2import { connect } from "react-redux"; 3import CalendarBoard from "./presentation"; 4import { 5 addScheduleOpenDialog, 6 addScheduleSetValue 7} from "../../redux/addSchedule/actions"; 8import { setSchedules } from "../../services/schedule"; 9 10const mapDispatchToProps = dispatch => ({ 11 openAddScheduleDialog: d => { 12 dispatch(addScheduleOpenDialog()); 13 dispatch(addScheduleSetValue({ date: d })); 14 } 15}); 16 17const mapStateToProps = state => ({ 18 calendar: state.calendar, 19 schedules: state.schedules 20}); 21 22const mergeProps = (stateProps, dispatchProps) => { 23 const { 24 calendar: month, 25 schedules: { items: schedules } 26 } = stateProps; 27 28 const calendar = setSchedules(createCalendar(month), schedules); 29 30 return { 31 ...stateProps, 32 ...dispatchProps, 33 calendar, 34 month 35 }; 36}; 37 38export default connect( 39 mapStateToProps, 40 mapDispatchToProps, 41 mergeProps 42)(CalendarBoard);

js

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

js

1import { SCHEDULES_ADD_ITEM } from "./actions"; 2import dayjs from "dayjs"; 3 4const init = { 5items: [ 6{ 7id: 1, 8title: "テストtitle", 9date: dayjs(), 10location: "テストlocation", 11description: "テストdescription" 12} 13], 14isLoading: false 15}; 16 17const schedulesReducer = (state = init, action) => { 18const { type, payload } = action; 19 20switch (type) { 21case SCHEDULES_ADD_ITEM: 22return { 23...state, 24item: [...state.items, { ...payload, id: state.items.length + 1 }] 25}; 26default: 27return state; 28} 29}; 30 31export default schedulesReducer;

試したこと

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2020/05/31 04:29

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

2020/05/31 04:46

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

回答1

0

ベストアンサー

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

投稿2020/05/31 03:05

markey

総合スコア355

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_3443_

2020/05/31 03:10

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

2020/05/31 03:19

ありがとうございます。mergePropsの中で`schedules`という変数名が重複しているかもしれないので、こう変えてみるとどうでしょうか? ```js const { calendar: month, schedules: { items } } = stateProps; const calendar = setSchedules(createCalendar(month), items); ```
_3443_

2020/05/31 03:48

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

2020/05/31 03:58

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

2020/05/31 04:22

ありがとうございます。 なるほどなるほど。 現在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

2020/05/31 05:02

今回の事象と関係があるかわかりませんが、reducerにtypoがあるかもしれません。 itemではなくitemsが正しい? ``` return { ...state, item: [...state.items, { ...payload, id: state.items.length + 1 }] } ```
_3443_

2020/05/31 05:40

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問