条件渲染，使用超时 无效的钩子调用反应

Question

当检查为真时，我想显示下一步按钮。我收到错误，例如意外的令牌，无效的钩子调用。 请帮助我。提前谢谢。

import React from "react";
import useTimeout from "use-timeout";
class App extends React.Component {
state = { check: true };
handleCheck = () => {
this.setState({ check: !this.state.check });
};
render() {
useTimeout(() => {
this.handleCheck();
}, 10000);
return (
<div>
{
if(this.state.check){
return <button>Next</button> 
}
}
</div>
);
}
}
export default App;

Answer 1

改为这样做：

<div> {this.state.check && <button>Next</button> </div>

并删除useTimeout你不需要它，你可以使用它，因为它是一个钩子，你正在使用一个类组件。您应该通过onClick来触发它，或者如果您坚持使用超时，请使用setTimeout但我不建议在渲染中使用它

使用如下timeout：

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