在哪里调用 setInterval 反应

Posted 2023-02-22

【中文标题】在哪里调用 setInterval 反应

【英文标题】：where call setInterval in react

【发布时间】：2021-11-05 19:25:20

【问题描述】：

我是新来的反应。我想使用 setState 和 setInterval 创建一个计数器。 我不想将 react.dom 渲染放在一个间隔中，因为我知道这不是一个好习惯。 这是我迄今为止的努力：

class Counter extends React.Component 
  state = 
    counter: 0
  
  increment = () => 
    setInterval(() => 
      this.setState(
        counter: this.state.counter+1);
    , 1000);
   
  ;
  
  render() 
    return <div>
    <p>this.state.counter</p>
    </div>;
  



const el = <Counter />; 
ReactDOM.render(
  el, document.getElementById('root')
);

我也试过这样：

class Counter extends React.Component 
  state = 
    counter: 0
  
  increment = () => 
    this.setState(
     counter: this.state.counter+1);
  ;
  
  render() 
    return <div>
    <p>this.state.counter</p>
    </div>;
  


setInterval(Counter.increment, 100)

const el = <Counter />; 
ReactDOM.render(
  el, document.getElementById('root')
);

他们都没有工作。 有什么问题？

【问题讨论】：

只是想知道你遇到了什么错误？

没有错误！它只显示 0

查看这个堆栈溢出：***.com/questions/36299174/setinterval-in-a-react-app

@nfn 在设置计数器时最好使用以前的状态：this.setState(prevState => ( counter: prevState.counter+1 )

【参考方案1】：

您没有调用increment 函数。您必须在 componentDidMount() 中调用它。

class Counter extends React.Component 
  state = 
    counter: 0
  
  increment = () => 
    setInterval(() => 
      this.setState(
        counter: this.state.counter+1);
    , 1000);
   
  ;
  
  componentDidMount()
    this.increment();
  
  
  render() 
    return <div>
    <p>this.state.counter</p>
    </div>;
  


ReactDOM.render(<Counter/>, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：

@nfn 请检查这个答案。