Реагировать на хуки setTimeout onclick

Question

Выдает ошибку. Невозможно прочитать свойство handleCheck, равное undefined, когда я нажимаю следующую кнопку. Может ли кто-нибудь помочь? Заранее спасибо

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = { check: false };
  handleCheck = () => {
    console.log("hello");
    this.setState({ check: !this.state.check });
  };
  componentDidMount() {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }
  timer() {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }
  render() {
    return (
      <div>
        <p>hello</p>
        {this.state.check ? (
          <button onClick={this.timer}>Next</button>
        ) : (
          <div>button not showing </div>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

Answer 1

timer также должно быть функцией стрелки, чтобы ссылаться на правильный this:

timer = () => {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }

. Другой способ исправить это - привязать this к timer.

И поскольку новое состояние зависит от старого состояния, функция handleCheck должна быть такой:

handleCheck = () => {
    console.log("hello");
    this.setState(prevState => ({ check: !prevState.check }));
  };

Answer 2

привет, как говорили предыдущие люди, вам нужно привязать (это) один из способов - сделать это вот так

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state =  { check: false };

    // This binding is necessary to make `this` work in the callback
    this.handleCheck = this.handleCheck.bind(this);
  }

это происходит потому, что когда вы вводите функцию, класс это не может быть достичь привязки решить эту проблему в обычной функции, когда вы go с функцией стрелки, эта область не используется там в этой области, вместо этого они наследуют одну из родительской области следующим образом: вместо:

  timer() {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }

do это:

  timer = () => {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }

Answer 3

Вы можете использовать функцию стрелки, как сказали другие пользователи, или в качестве альтернативы вы можете вручную привязать ее к функции:

// in the button
<button onClick={this.timer.bind(this)}>Next</button>
// or in the constructor
constructor(props) {
    super(props)
    this.timer = this.timer.bind(this)
}
<button onClick={this.timer)}>Next</button>

Answer 4

Вам нужно привязать это к функции таймера.

<button onClick={this.timer.bind(this)}>Next</button>

Answer 5

сделать его функцией стрелки:

  timer = () => {
    setTimeout(() => {
      this.handleCheck();
    }, 1000);
  }

, чтобы он был привязан к родительской области

Answer 6

Это обязательная проблема функции timer:

  timer = () => {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }

ИЛИ изменить onClick:

onClick={this.timer.bind(this)}

Решение:

class App extends React.Component {
  state = { check: false };
  handleCheck = () => {
    console.log("hello");
    this.setState({ check: !this.state.check });
  };
  componentDidMount() {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }
  timer = () => {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }
  render() {
    return (
      <div>
        <p>hello</p>
        {this.state.check ? (
          <button onClick={this.timer}>Next</button>
        ) : (
          <div>button not showing </div>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("react-root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="react-root"></div>