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

Question

当检查为真时，我想显示下一个 button.I 出现错误，例如意外标记、无效挂钩调用。请提前帮忙me.Thanks

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 你不需要它并且你不能使用它，因为它是一个钩子并且你正在使用 class 组件。您应该改为通过 onClick 触发它，或者如果您坚持使用超时，请使用 setTimeout 但我不建议在 render

中使用它

像这样使用 timeout：

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

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

Conditional Rendering,use-timeout Invalid hook call React

timeout

reactjs

conditional-rendering

react-hooks

use-state