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

}

- janeeyrea

---

这个短语的意思是“洗牌”。 - zerkms

@zerkms 哇，我真不敢相信我没想到这样做。它起作用了。谢谢！ - janeeyrea

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属性从其方法中访问，因此发生了这种情况。

如果您在handleClickMethod中定义了shuffleCards，则可以在不访问this的情况下调用它。

handleClickEvent(event) {

    function shuffleCards(array) {
      // ...
    }

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

- nem035

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

- Piotr Berebecki

Answer 3

我曾经遇到过同样的问题。

我升级了 "react-scripts" 并解决了这个问题。

很可能已经解决了。

npm i react-scripts

- Burak