条件渲染，使用超时 Invalid hook call React

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