如何在React中使用setInterval？

Question

I want the following app to print DAnce every second on the screen.

import React from 'react';
import ReactDOM from 'react-dom';

export class Sample extends React.Component {
    sample(text, i) {
        return <h1> DAnce</h1>;
    }

    render(){
        return (
            <div className="text-intro" id="site-type">  
                {setInterval(()=>this.sample('igod',1),1000)}
            </div>
        );
    }
}

ReactDOM.render(
  <Sample />,
  document.getElementById('root')
);

Instead I get 5 printed on the screen.
How do I obtain the desired effect?

Answer 1

You could store a count in your state, and use an interval to increment this count every second and create count many Dance in the render method.

Example

 class Sample extends React.Component { state = { count: 0 }; componentDidMount() { this.interval = setInterval(() => { this.setState(previousState => { return { count: previousState.count + 1 }; }); }, 1000); } componentWillUnmount() { clearInterval(this.interval); } render() { return ( <div className="text-intro" id="site-type"> {Array.from({ length: this.state.count }, () => <div>Dance</div>)} </div> ); } } ReactDOM.render(<Sample />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 2

You have to think has the text as something that is changing in your app. That is ideal for state.

I don't know what your functions sample does. But let's say you have it declared.

const sample = (text, i) => { ... };

Then you can do it like this:

class Sample extends Component {
  state = {
    text: sample('igod', 1),
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        text: this.sample('igod',1)
      });
    }, 1000);
  }

  render() {
    return (
      <div className="text-intro" id="site-type">
        {this.state.text}
      </div>
    );
  }
}

Basically what happens is, when your component mounts you will start a timeout where every 1 second it will update the state thus updating your UI.

Answer 3

Try this,

import React from 'react';
import ReactDOM from 'react-dom';

export class Sample extends React.Component {
sample(text, i) {
    return <h1> DAnce</h1>;
}
   render(){
      return(
         <div className="text-intro" id="site-type">
         {setTimeout(()=>{this.sample('igod',1)}, 1000)}
         </div>
      );
   }
}
ReactDOM.render(
   <Sample />,
document.getElementById('root')
);

Answer 4

You have used setTimeout which will be called only number of times while component renders.

You need to use setInterval to work each second.

Replace with this. Hopw this will help you.

{setInterval(()=>this.sample('igod',1),1000)}

Answer 5

What if you use the react lifecycle :

 export class Sample extends React.Component { sample(text, i) { this.setState({ text }); } render(){ return( <div className="text-intro" id="site-type"> <h1>{this.state.text}</h1> {setTimeout(()=>this.sample('igod',1),1000)} </div> ); }