Question

当我单击下一步按钮时，出现错误，无法读取未定义的属性“ handleCheck”。谁能帮忙吗？谢谢！

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

这是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>

Answer 3

使其成为箭头功能：

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

因此它绑定到父范围

Answer 4

您需要将其绑定到计时器功能。

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

Answer 5

您可以像其他用户所说的那样使用箭头功能，或者可以将其手动绑定到该功能：

// 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 6

嗨，正如以前的人们所说，您需要绑定（此）方法之一就是像这样

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

之所以会发生这种情况，是因为当您输入一个函数时，无法访问该类绑定在常规功能中解决当您使用箭头功能时，此作用域不要在该作用域上使用那里，而是从父作用域继承一个作用域像这样：代替：

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

执行以下操作：

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

反应setTimeout钩onclick

6 个答案: