React.JS組件類中的函數未定義錯誤

Question

我寫了一個帶有構造函數，方法和渲染的react組件。 當我注釋掉方法並且只使用render和構造方法時，一切都很好，但是當我添加方法時，除非我在構造方法之后關閉整個類，否則第一個方法總是以未定義的形式出現。

這是我的課程（因為為簡單起見，我只放方法聲明什么都無所謂）：

export default class App extends Component {

  constructor(props) {
    super(props);
    const allWords = ["word", "pipe", "dear", "deer", "fish", "coat"];
    const word= allWords[Math.floor(Math.random()*allWords.length)];
    var lettersFound = [];
    for (var i=0; i<word.length;i++) {
      lettersFound = [...lettersFound, [i, "_"]];
    }
    this.fillWord = this.fillWord.bind(this);

    this.state = {
      word: word,
      numWrongGuesses: 0,
      lettersGuessed: [],
      lettersFound: lettersFound,
      error: ""
    }
  }

  isLetterInWord = (letter) => {
  }

  fillWord = () => {
  }



  handleGuess = (letter) => {
  }

  render () {
    return (
      <div className="App">
      </div>
    );
  }

}

這不會編譯，並給出錯誤“'isLetterInWord'未定義”。 如果我刪除此功能，則會在fillWord上引發錯誤。 如果在構造函數之后添加“}”，則所有方法均已定義，但render在返回行上引發意外的令牌錯誤。 我不明白為什么我要在構造函數之后關閉該類，或者為什么它不按原樣進行編譯。

Answer 1

在這里，您正在定義類屬性，當前（我認為）是第3階段的建議。 換句話說，默認情況下不支持。 可能是因為這個原因，您遇到了錯誤。 您可以使用Babel的class-properties-transform插件來添加對此語法的支持，如果您願意的話。

isLetterInWord = (letter) => {
  }

  fillWord = () => {

  }

嘗試將方法定義為，看看是否可行

isLetterInWord(letter) {

}

Answer 2

嘗試將函數綁定到構造函數中，如下所示：

this.isLetterInWord = this.isLetterInWord.bind(this);
this.fillWord = this.fillWord.bind(this)
this.handleGuess = this.handleGuess.bind(this);