Cannot read property 'question' エラー

Question

React初心者です
定義してもundefinedエラーが出ています。

TypeError: Cannot read property 'question' of undefined
App.displayNextQuestion
src/App.jsx:23

App.jsx

import React from 'react';
import defaultDataset from './dataset'
import'./assets/styles/styles.css'
import {AnswersList,Chats} from "./components/index"

export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state= {
      answers: [],
      chats: [],
      current: "init",
      dataset: defaultDataset,
      open: false,
      question: ["abc"]　　ここで定義？ 
    }
    this.selectAnswer = this.selectAnswer.bind(this)
  }

  displayNextQuestion = (nextQuestionId) => {　　エラーメソッド
  const chats = this.state.chats
  chats.push({ 
    text: this.state.dataset[nextQuestionId].question,　エラー部分
    type: 'question',
  })

  this.setState({
    answers: this.state.dataset[nextQuestionId].answers,
    chats: chats,
    currentId: nextQuestionId
  })
  }

selectAnswer = (selectedAnswer, nextQuestionId) =>{
 switch(true){
   case(nextQuestionId === 'init'):
     setTimeout(() => this.displayNextQuestion(nextQuestionId), 　500)  エラーメソッド
     break;
   case(/https:*/.test(nextQuestionId)):
   const a = document.createElement('a');
   a.href = nextQuestionId;
   a.target = '_blank';
   a.click();
   break;
   default: 
  const chats = this.state.chats
  chats.push({
    text: selectedAnswer,
    type: 'answer'
  })

  this.setState ({
    chats: chats
  });
  setTimeout( () =>this.displayNextQuestion(nextQuestionId),700);エラーメソッド
     break;
 }
}

  componentDidMount() {
    const initAnswer = ""
   this.selectAnswer(initAnswer, this.state.currentId)
  }

  componentDidUpdate() {
    const scrollArea = document.getElementById("scroll-area")
    if(scrollArea){
      scrollArea.scrollTop = scrollArea.scrollHeight
    }
  }
  render(){
    return (
      <section className="c-section">
       <div className="c-box">
        <AnswersList  answers={this.state.answers} select= {this.selectAnswer}/>
        <Chats chats={this.state.chats}/>
       </div>
      </section>
    );
  }
}

Answer 1

this.state.dataset[nextQuestionId].question

this.state.datasetの中身次第です。
おそらくdatasetの中にnextQuestionIdに該当するレコードがないためだと思います。
該当レコードがない(多分に推測を含みますが、dataset内の問題を全て探索し終えて、もう次の問題がない等)場合も考慮するなら下記のように書くことでエラーは出なくなると思います。

text: this.state.dataset[nextQuestionId]?.question || '',

ただ、これで根本解決したとは思えないので、datasetのimport元のファイルも提示いただけるとより回答がしやすいと思います。

Comments

[tomsuma]

ご回答ありがとうございます！

ユーチューブのトラハックさんの物を参考に作っているのですが、

ただ今載せさせてもらいました

[nekoniki]

提示ありがとうございます。
このエラーはどのタイミングで発生しますか？(描画時、なんらかの操作をした後など)

[tomsuma]

yarn start した後一瞬画面は映るのですが、
その後、すぐにエラーとなります
コメントアウトで突き止めようとしたのですが、
すべてつながっているようで特定が難しかったです、、

[nekoniki]

componentDidMount() {
const initAnswer = ""
this.selectAnswer(initAnswer, this.state.currentId)
}

とありますが、この時点でstateにはcurrentIdは存在しないのではないでしょうか？
あるとすればcurrentIdではなくcurrentな気がします。

また、nextQuestionIdが"contact"の時に対応するレコードがdatasetの中にないためselectAnswerのswitch,case文で何らか処理をしてあげる必要がありそうです。
※そのままだとdefaultの処理に入りsetTimeoutでdisplayNextQuestionが呼び出され、エラーになると思います。

[tomsuma]

かしこまりました！

ご回答ありがとうございます。

currentにしたら治りました！
また何かあったらもう少し
構造をしっかり考えてみたいと思います！