JavaScriptで有効なmap関数がTypeScriptで認識されない原因は？

Question

現在、ReactとTypeScriptの組み合わせでフロントエンドの実装をしようとしています。
今やろうとしている事の概要としては、バックエンドで処理された"word"をaxiosのgetで取得して配列に格納し、それをフロントエンドページで表示するという比較的シンプルな内容です。バックエンドの部分が正常に処理される事はPostmanで確認しておきました。

ReactとTypeScriptの組み合わせのチュートリアルで、自分のやりたい事に該当する内容のものがなかなか見当たらなかったのでReact＋JavaScriptのチュートリアルを見ながら進めているのですが、チュートリアルでは問題なく実装できている部分が自分のTypeScriptではエラーになってしまいます。それがタイトルにもあるmap関数の部分です。チュートリアルでは問題ないのに、僕の場合は
TypeError: this.state.wordsData.map is not a functionというエラーが出てきてしまいます。

下記がコードです。

import React from 'react';
import axios from 'axios'
import Word from '../interfaces/Word.interface';

class Home extends React.Component{

  state = {
    wordsData:new Array<Word>()
  }

  componentWillMount(){
    axios.get('http://localhost:8080/pictionarizerservices/api/words')
    .then(res => {
      const data = res.data;
      console.log("The content of res: ");
      console.log(res);
      this.setState({
        wordsData:{
          id: data.id,
          ownLangWordName: data.ownLangWordName,
          targetLangWordName: data.targetLangWordName,
          ownLangExSentence: data.ownLangExSentence,
          targetLangExSentence: data.targetLangExSentence,
          createdDate: data.createdDate
        }
      })
    })
  }

  render(){
    return(
      <div>
        <h2>Words:</h2>
        <table>
        <thead>
          <tr>
          <th>ID</th>
          <th>Word (OL)</th>
          <th>Word (TL)</th>
          <th>Sentence (OL)</th>
          <th>Sentence (TL)</th>
          <th>Created Date</th>
          </tr>
        </thead>
        <tbody>
          {this.state.wordsData.map(singleWord=>
          <RowCreator 
            id={singleWord.id}
            ownLangWordName={singleWord.ownLangWordName}
            targetLangWordName={singleWord.targetLangWordName}
            ownLangExSentence={singleWord.ownLangExSentence}
            targetLangExSentence={singleWord.targetLangExSentence}
            createdDate={singleWord.createdDate}
            />)}
        </tbody>
        </table>
      </div>
    )
  }
}

class RowCreator extends React.Component<Word>{

  render(){
    let word = this.props;
    return(
        <tr>
          <td>{word.id}</td>
          <td>{word.ownLangWordName}</td>
          <td>{word.targetLangWordName}</td>
          <td>{word.ownLangExSentence}</td>
          <td>{word.targetLangExSentence}</td>
          <td>{word.createdDate}</td>
        </tr>
    )
  }
}

export default Home; 

TypeScriptのSyntaxに合わせるためにチュートリアルの部分と変えた所といえば、

state = {
    patientData:[]
}

を

  state = {
    wordsData:new Array<Word>()
  }

に、それから

class RowCreator extends React.Component{
...

を

class RowCreator extends React.Component<Word>{
...

にしたぐらいです。

僕がこれまで自分で勉強したり調べたりして現時点でわかっているのは、TypeScriptはJavaScriptの厳密なスーパーセットであり、JavaScriptで有効なコードはTypeScriptでも全て有効になるはずだという事です。また、TypeScriptはVisual Studio Codeでならコードを書いている時点で何か間違いがあればプログラムを実行する前からエラーがマークアップされて表示されるのですぐに間違いに気づけるとも聞いているのですが、全部エラーのマークアップが消えた後でRun timeでこのようなエラーが出てしまう理由がよくわかりません。

TypeScriptで

<tbody>
          {this.state.wordsData.map(singleWord=>
          <RowCreator 
            id={singleWord.id}
            ownLangWordName={singleWord.ownLangWordName}
            targetLangWordName={singleWord.targetLangWordName}
            ownLangExSentence={singleWord.ownLangExSentence}
            targetLangExSentence={singleWord.targetLangExSentence}
            createdDate={singleWord.createdDate}
            />)}
        </tbody>

の部分を機能させるにはどうすればよいのでしょうか？

Answer 1

こんにちは

TypeError: this.state.wordsData.map is not a function

というエラーが発生する原因は、axios によるGETが成功したときの、以下の部分

this.setState({
    wordsData: {
        id: data.id,
        ownLangWordName: data.ownLangWordName,
        targetLangWordName: data.targetLangWordName,
        ownLangExSentence: data.ownLangExSentence,
        targetLangExSentence: data.targetLangExSentence,
        createdDate: data.createdDate
    }
})

で、state の wordsDataプロパティに、配列ではなくオブジェクト

{
    id: data.id,
・・・
    createdDate: data.createdDate
}

を setState してしまっていることと思われます。上記のsetStateによって、this.state.wordsData にオブジェクトを入れてしまうと、オブジェクトには map というメソッドはないので、render で返すJSX の中にある

{this.state.wordsData.map(singleWord=> ･･･

で、this.state.wordsData.map is not a function というエラーになります。

修正方法としては、GETで返されたレスポンスから得られた配列を this.state.wordsData に setState するように、見直されることをお勧めします。

以上、参考になれば幸いです。

Comments

[Sean2014]

ありがとうございます。アドバイスに沿って、先ほど自分で投稿した回答のようにしてみたらエラーが消えました。

[jun68ykt]

どういたしまして????
問題が解決したようで、よかったです????

Answer 2

下記のように修正したらエラーが消えました。

this.setState({
    wordsData:{
      id: data.id,
      ownLangWordName: data.ownLangWordName,
      targetLangWordName: data.targetLangWordName,
      ownLangExSentence: data.ownLangExSentence,
      targetLangExSentence: data.targetLangExSentence,
      createdDate: data.createdDate
    }
  })

↓↓

this.setState({
    wordsData:[{
      id: data.id,
      ownLangWordName: data.ownLangWordName,
      targetLangWordName: data.targetLangWordName,
      ownLangExSentence: data.ownLangExSentence,
      targetLangExSentence: data.targetLangExSentence,
      createdDate: data.createdDate
    }]
  })