React setTimeout hooks onclick

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 = () => {
setTimeout(() => {
this.handleCheck();
}, 1000);
}

所以它绑定到父范围

Answer 3

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