React JS 未捕獲的引用錯誤：函數未定義

Question

我試圖在 ReactJs 組件中的點擊事件時調用 shuffleCards。 但是，我收到以下錯誤：

Uncaught ReferenceError: shuffleCards is not defined

這是我的代碼：

constructor(props) {
    super(props);

    this.state = {
        count: 0
    };
}

shuffleCards(array) {
    var i = array.length,
        j = 0,
        temp;

    while (i--) {
        j = Math.floor(Math.random() * (i+1));

        temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

handleClickEvent(event) {
    var cards = [
        {txt: "A",
        isDisplayed: false},
        {txt: "B",
        isDisplayed: false},
        {txt: "C",
        isDisplayed: false}
    ];
    if (this.state.count == 0) {
        cards = shuffleCards(cards);
    }

}

Answer 1

編輯剛剛看到評論，並且zerkms已經為您提供了解決方案。 我會留下我的答案以澄清澄清。

---

你的問題是在handleClickMethod ，你正在調用shuffleCards而不是this.shuffleCards

 shuffleCards(array) { // ... } handleClickEvent(event) { // ... if (this.state.count == 0) { cards = this.shuffleCards(cards); // here you should use `this.` } } 

原因是因為shuffleCards方法是在您的組件上定義的，可以通過this屬性從其方法訪問它。

如果定義shuffleCards的內handleClickMethod ，那么你可以把它無需訪問this ：

 handleClickEvent(event) { function shuffleCards(array) { // ... } // ... if (this.state.count == 0) { cards = shuffleCards(cards); // here you don't need `this.` } } 

Answer 2

這對你有用嗎？ 在這里演示： http ： //codepen.io/PiotrBerebecki/pen/qaRdgX

你在handleClickEvent方法中引用shuffleCards時錯過了this 。

shuffleCards(array) {
  // logic here
}

handleClickEvent(event) {
  cards = this.shuffleCards(cards);
}

render() {
  return (
    <button onClick={this.handleClickEvent.bind(this)}>Click me</button>
  );
}

Answer 3

我有同樣的問題。

我升級了“ react-scripts ”並解決了這個問題。

大概解決這個問題。

npm i react-scripts