Reactでmapメソッドがundefinedになる

Question

『React.js&Next.js超入門』の書籍を参考に簡易メモアプリを作成しているのですが、ここ数日以下のようなエラーに悩まされています。

エラーメッセージ

TypeError: Cannot read property 'map' of undefined

エラー内容

Memo.render
src/memo/Memo.js:31
  28 |     break;
  29 |   
  30 |   default:
> 31 |     data = this.props.data.map((value) => (
| ^  32 |       <Item key={value.message} value={value} index={n++} />
  33 |     ));
  34 | }

Module../src/index.js
src/index.js:10
   7 | // import * as serviceWorker from './serviceWorker';
   8 | 
   9 | // 表示をレンダリング
> 10 | ReactDOM.render(
  11 |   < Provider store={MemoStore}>
  12 |     <App />
  13 |   </Provider>,

資源

Memo.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import Item from './Item';

class Memo extends Component {

  render() {
    let data;
    let n = 0;
    switch (this.props.mode) {
      case 'default':
        data = this.props.data.map((value) => (
          <Item key={value.message} value={value} index={n++} />
        ));
        break;

      case 'find':
        data = this.props.fdata.map((value) => (
          <Item key={value.message} value={value} index={n++} />
        ));
        break;
      
      case 'delete':
        data = this.props.data.map((value) => (
          <Item key={value.message} value={value} index={n++} />
        ));
        break;
      
      default:
        data = this.props.data.map((value) => (
          <Item key={value.message} value={value} index={n++} />
        ));
    }
    
    return (
      <table><tbody>{data}</tbody></table>
    );
  }
}
export default connect((state) => state)(Memo);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import MemoStore from './memo/Store'
// import * as serviceWorker from './serviceWorker';

// 表示をレンダリング
ReactDOM.render(
  < Provider store={MemoStore}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
// serviceWorker.unregister();

どうやらmapで作成した配列の値が見つからずエラーになっているみたいなんですが、
エラー箇所の「Memo.js」と「index.js」を見直してみたものの解決に至らず...
mapメソッドあたりのコードをみても構文が間違っているようには見えないんですが、うまく値が受け渡しできていのでしょうか？

追記

Store.js

import { createStore } from "redux";

const initData = {
  data: [{ message: "sample data", created: new Date() }],
  message: "please type message",
  mode: "default",
  fdata: [],
};

// レデューサー
export function memoReducer(state = initData, action) {
  switch (action.type) {
    case "ADD":
      return addReduce(state, action);

    case "DELETE":
      return deleteReduce(state, action);

    case "FIND":
      return findReduce(state, action);
  }
}

// レデュースアクション

// メモ追加のレデュース処理
function addReduce(state, action) {
  let data = {
    message: action.message,
    created: new Date(),
  };
  let newdata = state.data.slice();
  newdata.unshift(data);
  return {
    data: newdata,
    message: "Added!",
    mode: "default",
    fdata: [],
  };
}

// メモ検索のレデュース処理
function findReduce(state, action) {
  let f = action.find;
  let fdata = [];
  state.data.forEach((value) => {
    if (value.message.indexOf(f) >= 0) {
      fdata.push(value);
    }
  });
  return {
    data: state.data,
    message: 'find "' + f + '":',
    mode: "find",
    fdata: fdata,
  };
}

// メモ削除のレデュース処理
function deleteReduce(state, action) {
  let newdata = state.data.slice();
  newdata.splice(action.index, 1);
  return {
    data: newdata,
    message: 'delete "' + action.index + '":',
    mode: "delete",
    fdata: [],
  };
}

// アクションクリエーター

// メモ追加のアクション
export function addMemo(text) {
  return {
    type: "ADD",
    message: text,
  };
}

// メモ削除のアクション
export function deleteMemo(num) {
  return {
    type: "DELETE",
    index: num,
  };
}

// メモ検索のアクション
export function findMemo(text) {
  return {
    type: "FIND",
    find: text,
  };
}

// ストアを作成
export default createStore(memoReducer);

PG修正

Store.js

import { createStore } from "redux";

const initData = {
  data: [{ message: "sample data", created: new Date() }],
  message: "please type message",
  mode: "default",
  fdata: [],
};

// レデューサー
export function memoReducer(state = initData, action) {
  switch (action.type) {
    case "ADD":
      return addReduce(state, action);

    case "DELETE":
      return deleteReduce(state, action);

    case "FIND":
      return findReduce(state, action);

    # actionが不明な場合はstateをそのまま返す必要があるため、default処理を追記
    default:
      return state;
  }
}
# 以下略

Comments

[hoshi-takanori]

this.props.data が null なので、その map メソッドなんてないというエラーですね。
で、connect((state) => state) なので redux の state がそのまま props になってるのかな？
memo/Store.js の内容も貼ってもらえませんか？

[mune92283498]

閲覧いただきありがとうございます。

memo/Store.jsの内容も貼りました。

Answer 1

reducer では action が不明な場合は受け取った state をそのまま返す必要があります。そうしないと初期値が undefined になってしまいますし、今後 reducer を複数組み合わせて使う際にも、他の reducer 宛の action で自分の state が undefined になってしまいます。
参考: Redux入門 3日目 Reduxの基本・Reducers(公式ドキュメント和訳) - Qiita

 export function memoReducer(state = initData, action) {
   switch (action.type) {
     // 略
 
+    default:
+      return state;
   }
 }

Comments

[mune92283498]

訂正していただいたコードを追記したら解決しました！ありがとうございました????
Reducerの処理分岐に、「受け取ったstateをそのまま返すdefault処理が必要」だったんですね。
書籍をそのまま写経したんですが、こういうこともあるんですね。。。

まだまだReduxを理解できていない部分が多いので、参考URLの関連記事も読んでReduxの仕組みを咀嚼していきたいと思います。
ありがとうございました！

Answer 2

TypeError: Cannot read property 'map' of undefinedなので、Memo.jsのthis.props.dataがundefinedです。Memo.jsの親コンポーネントからpropsが渡されているか確認してみてください。

Comments

[mune92283498]

ご回答ありがとうございます。
propsから値がうまく渡っていなかったようでした。