目前，我正在尝试构建一个带有React和Typescript组合的前端页面。 我尝试做的是通过axios的get方法获取“单词”，并将数据分配给一个数组，然后在前端页面上显示它，这非常简单。 我已经确保后端部分使用邮递员工作良好。

由于我没有找到一个很好的“React&；Typescript”教程与我想做的完全匹配，我正在学习“React&；JavaScript”教程。 我觉得有点奇怪的是，在“React&；JavaScript”中编写的完全有效的部分导致了一个错误“TypeError:this.state.WordsData.Map is not a function”，在我的例子中，这个错误是在“React&；TypeScript”中编写的。

这是我的密码。

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>
          <th>ID</th>
          <th>Word (OL)</th>
          <th>Word (TL)</th>
          <th>Sentence (OL)</th>
          <th>Sentence (TL)</th>
          <th>Created Date</th>
        </table>
        <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>
      </div>
    )
  }
}

class RowCreator extends React.Component<Word>{

  render(){
    let word = this.props;
    return(
      <div>
        <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>
      </div>
    )
  }
}

export default Home; 

为了适应TypeScript，我修改了一些语法，但以下是我修改的全部内容。

发件人

state = {
    patientData:[]
}

至

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

，并从

class RowCreator extends React.Component{
...

至

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

仅此而已。

通过自学TypeScript，我已经知道TypeScript是JavaScript的严格超集，所有用JavaScript编写的有效代码在TypeScript中也应该是有效的。 另外，特别是在用Visual Studio编写代码时，Typescript的错误检测功能非常出色，与用JavaScript编写代码相比，您可以提前发现更多的错误。 在运行程序之前，我确保所有的错误标记都被删除了，现在我得到了这个“TypeError:this.state.WordsData.Map is not a function”错误作为运行时错误。

我怎样才能得到这个角色

<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>

做打字稿？