React JS Notc Reference Reference: функция не определена

Я пытаюсь вызвать shuffleCards, когда событие click в компоненте ReactJs. Однако я получаю следующую ошибку:

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

}

Ответ 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.`
    }
}

Ответ 2

Будет ли это работать для вас? Демо здесь: http://codepen.io/PiotrBerebecki/pen/qaRdgX

Вы пропустили this при обращении к shuffleCards в методе handleClickEvent.

shuffleCards(array) {
  // logic here
}

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

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

Ответ 3

У меня была такая же проблема.

И я обновляю "response-scripts" и исправляю эту проблему.

Вероятно, это исправить.

npm i react-scripts