Reactエラー「'map' of undefined」の解決

Question

前提・実現したいこと

React・Firebase・MaterialーUIを用いたチャットボットアプリを作成中に
map関数を使用後エラーが表示されたため、原因究明および解決にご教授ください。

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

該当のソースコード （ファイル名：AnswersList.jsx）

import React from 'react'
import {Answer} from './index'

// Answerコンポーネントのpropsを受け継ぐ
const AnswersList = (props) => {
    return (
        <div className="c-grid__answer">
            {props.answers.map((value, index) => {
                {/* Answerコンポーネントを変数contentに代入してインスタンスを生成している */}
                return <Answer content={value.content} key={index.toString()} /> 
            })}
        </div>
    )
}

export default AnswersList

その他のソースコード （ファイル名：.index.js）

// エントリーポイント
export {default as AnswersList} from './AnswersList.jsx'
export {default as Answer} from './Answer.jsx'

その他のソースコード （ファイル名：.dataset.js）

const defaultDataset = {
    "init": {
        answers: [
            {content: "仕事を依頼したい", nextId: "job_offer"},
            {content: "エンジニアのキャリアについて相談したい", nextId: "consultant"},
            {content: "学習コミュニティについて知りたい", nextId: "community"},
            {content: "お付き合いしたい", nextId: "dating"},
        ],
        question: "こんにちは！????トラハックへのご用件はなんでしょうか？",
    },
    "job_offer": {
        answers: [
            {content: "Webサイトを制作してほしい", nextId: "website"},
            {content: "Webアプリを開発してほしい", nextId: "webapp"},
            {content: "自動化ツールを作ってほしい", nextId: "automation_tool"},
            {content: "その他", nextId: "other_jobs"}
        ],
        question: "どのようなお仕事でしょうか？",
    },
    "website": {
        answers: [
            {content: "問い合わせる", nextId: "contact"},
            {content: "最初の質問に戻る", nextId: "init"}
        ],
        question: "Webサイト細作についてですね。コチラからお問い合わせできます。",
    },
    "webapp": {
        answers: [
            {content: "問い合わせる", nextId: "contact"},
            {content: "最初の質問に戻る", nextId: "init"}
        ],
        question: "Webアプリ開発についてですね。コチラからお問い合わせできます。",
    },
    "automation_tool": {
        answers: [
            {content: "問い合わせる", nextId: "contact"},
            {content: "最初の質問に戻る", nextId: "init"}
        ],
        question: "自動化ツール開発についてですね。コチラからお問い合わせできます。",
    },
    "other_jobs": {
        answers: [
            {content: "問い合わせる", nextId: "contact"},
            {content: "最初の質問に戻る", nextId: "init"}
        ],
        question: "その他についてですね。コチラからお問い合わせできます。",
    },
    "consultant": {
        answers: [
            {content: "YouTubeで動画を見る", nextId: "https://www.youtube.com/channel/UC-bOAxx-YOsviSmqh8COR0w"},
            {content: "学習コミュニティについて知りたい", nextId: "community"},
            {content: "最初の質問に戻る", nextId: "init"}
        ],
        question: "トラハックは普段からYouTubeでキャリアについて発信しています。また、僕が運営するエンジニア向け学習コミュニティ内でも相談に乗っていますよ。",
    },
    "community": {
        answers: [
            {content: "どんな活動をしているの？", nextId: "community_activity"},
            {content: "コミュニティに参加したい", nextId: "https://torahack.web.app/community/"},
            {content: "最初の質問に戻る", nextId: "init"}
        ],
        question: "2020年3月から学習コミュニティを始めました！????Webエンジニアへの転職を目指す人向けに、プログラミングを教えたりキャリアの相談に乗っています。",
    },
    "community_activity": {
        answers: [
            {content: "さらに詳細を知りたい", nextId: "https://youtu.be/tIzE7hUDbBM"},
            {content: "コミュニティに参加したい", nextId: "https://torahack.web.app/community/"},
            {content: "最初の質問に戻る", nextId: "init"}
        ],
        question: "フロントエンド向けの教材の提供、キャリアや勉強法に関するメルマガの配信、週1のオンライン作業会などを開催しています！\n詳細はYouTube動画で紹介しています。",
    },
    "dating": {
        answers: [
            {content: "DMする", nextId: "https://twitter.com/torahack_"},
            {content: "最初の質問に戻る", nextId: "init"}
        ],
        question: "まずは一緒にランチでもいかがですか？DMしてください????",
    },
}

export default defaultDataset //外部クラスからインポート可能にしている

その他のソースコード （ファイル名：.Answer.jsx）

import REACT from 'react';
import { makeStyles } from '@material-ui/core/styles'; //material-uiをインポート
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
    root: {
    },
}));

const Answer = (props) => {

    // const classes = useStyles(); 今は使わない

    return(
        // material-uiのButtonコンポーネントを呼び出す
        <Button variant="contained" color="primary">
            {props.content}
        </Button>
    )
}

export default Answer

その他のソースコード （ファイル名：.App.jsx）

import React from 'react';
import defaultDataset from "./dataset.js";
import './style.css';
import {AnswersList} from './components/index.js';

export default class App extends React.Component {
	// 初期状態へ戻すコンストラクタ定義
	constructor(props) {
		super(props);
		this.state = {
			answers: [],
			chats: [],
			currentId: "init",
			dataset: defaultDataset,
			open: false
		}
	}

	// コンストラクタフィールドのanswersに値を代入するメソッド
	initAnswer = () => {
		// コンストラクタフィールドのdatasetの値を変数へ代入している
		// datasetの配列データはコンストラクタフィールドのcurrentIdから代入している
		// datasetが連想配列であるため、currentIdの値を配列で指定する必要がある
		const initDataset = this.state.dataset[this.state.currentId]
		// 指定したcurrentIdのanswersを変数へ代入している
		const initAnswers = initDataset.answers

		// 受け取ったanswersの内容を現在のstateとする
		this.setState({
			answers: this.initAnswers
		})
	}

	// 最初のrenderが走ったあとに実行される
	componentDidMount() {
		this.initAnswer()
	}

	// stateが書き換わる度にrenderが実行される
	render() {
		return (
			<section className="c-section">
				<div className="c-box">
					{/* AnswersListコンポーネントを変数answerに代入してインスタンスを生成している */}
					{/* this.state.answerはコンストラクタのanswerを表している */}
					<AnswersList answers={this.state.answers} />
				</div>
			</section>
		);
	}
}

Answer 1

props.answers.mapでエラーとのことなので、
console.log(props.answers)で確認しながら、どこで値の受け渡しに失敗しているかを調べる必要があると思います。

ざっと見た感じでは、

this.setState({
  answers: this.initAnswers
})

おそらくここだと思います。
this.initAnswersではなくinitAnswersが正しいのではないでしょうか？

Comments

[guuuuuuuuura]

nekonikiさんのおっしゃる通りに訂正したところ、エラーが解決いたしました。
ありがとうございます。
thisをつけてしまうとprops.initAnswersという存在しない関数を呼び出すことになるのでしょうか。
もっと勉強します。