為什么 JavaScript 中的一段有效代碼會在 Z558B544CF685F338B64E 中產生 map function 錯誤？

Question

目前我正在嘗試使用 React 和 TypeScript 的組合構建前端頁面。 我要做的是通過 axios 的 get 方法獲取“單詞”並將數據分配給數組，然后將其顯示在前端頁面上，這非常簡單。 我已經確保后端部分使用 Postman 可以正常工作。

由於我沒有找到與我想做的完全匹配的好的“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>
        <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，我稍微修改了語法，但以下都是我改變的。

從

state = {
    patientData:[]
}

至

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

，並且從

class RowCreator extends React.Component{
...

至

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

就這樣。

What I already know by studying by myself about TypeScript is that TypeScript is a strict superset of JavaScript, and all valid code written in JavaScript should be valid in TypeScript as well. 此外，尤其是在 Visual Studio Code 中編寫時，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>

在 TypeScript 工作？

Answer 1

您將其設置為 object

  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
    }]
  })