Question

当检查为true时，我想显示“下一步”按钮。出现诸如意外令牌，无效钩子调用之类的错误。请帮助我。谢谢。

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，但我不建议在render内使用它

像这样使用timeout：

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

有条件的渲染，使用超时无效的挂钩调用React

1 个答案: