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

Posted 2023-02-22

【中文标题】条件渲染，使用超时 Invalid hook call React

【英文标题】：Conditional Rendering,use-timeout Invalid hook call React

【发布时间】：2020-10-07 00:54:46

【问题描述】：

当检查为真时，我想显示“下一步”按钮。我收到诸如意外令牌、无效挂钩调用之类的错误。 请帮助我。提前致谢。

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;

【问题讨论】：

React hooks 只在功能组件中有效。

【参考方案1】：

改为这样做：

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

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

像这样使用timeout：

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

【讨论】：

我实际上想使用超时。我正在尝试别的东西，这只是一个试验。请告诉我如何使用超时。感谢回复！

嘿。我尝试使用 setTimeout 但没有任何改变，所以我在 handleCheck() 中执行了 console.log("hi")。 Hi 连续打印无限次。我不知道在哪里可以使用 setTimeout 函数，所以我在渲染函数中使用了它抱歉。请您帮忙

@mamadgiaishwarya 再次更新。在componentDidMount内使用

嘿，我完全按照你说的做了。现在我没有收到错误，但没有任何改变。

@mamadgiaishwarya 请检查一下？ codesandbox.io/s/react-playground-nll2z?file=/index.js