Javascript React JS 未捕获的引用错误:函数未定义

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/39627769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 22:44:49  来源:igfitidea点击:

React JS Uncaught Reference Error: function not defined

javascriptreactjs

提问by janeeyrea

I am trying to call shuffleCards when the upon a click event in a ReactJs component. However, I am receiving the following error:

我试图在 ReactJs 组件中的点击事件时调用 shuffleCards。但是,我收到以下错误:

Uncaught ReferenceError: shuffleCards is not defined

Here's my code:

这是我的代码:

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

}

回答by nem035

EDITJust saw the comments and that zerkmsalready provided you with the solution. I'll leave my answer for clarification purposes.

编辑刚刚看到评论,zerkms已经为您提供了解决方案。为了澄清目的,我会留下我的答案。



你的问题是在里面handleClickMethodhandleClickMethod,你打电话shuffleCardsshuffleCards而不是this.shuffleCardsthis.shuffleCards

shuffleCards(array) {
  // ...
}

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

The reason is because shuffleCardsmethod is defined on your component, which is accessible from its methods via the thisproperty.

原因是因为shuffleCards方法是在您的组件上定义的,可以通过this属性从其方法访问。

If you defined shuffleCardswithin the handleClickMethod, then you could call it without accessing this:

如果定义shuffleCards范围内的handleClickMethod,那么你可以把它无需访问this

handleClickEvent(event) {

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

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

回答by Piotr Berebecki

Would this work for you? Demo here: http://codepen.io/PiotrBerebecki/pen/qaRdgX

这对你有用吗?演示在这里:http: //codepen.io/PiotrBerebecki/pen/qaRdgX

You missed thiswhen referring to shuffleCardsin the handleClickEventmethod.

您在方法中this提到时错过shuffleCardshandleClickEvent

shuffleCards(array) {
  // logic here
}

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

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

回答by Burak

I had the same problem.

我有同样的问题。

And i upgrade "react-scripts" and fix this problem.

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

Probaply fix this.

大概解决这个问题。

npm i react-scripts