React每秒从数组渲染一个元素

Question

在reactjs上，如何从数组中每秒打印一个元素？ 我试图复制并简化我的工作。该阵列来自redux。 但最终的情况并没有改变。 感谢。

const arrWords=["I", "would", "like", "to", "print", "one", "word", "per", "second"];
class Message extends React.Component {
	renderWord(word,index) {
      return <span key={index}> {word} </span>;
    }
	renderWords() {
      const words =  arrWords.map((word, index) => {
      	return this.renderWord(word, index);
      });
      return words;
    }
    render(){
      return (
        <p>{this.renderWords()}</p>
      );
    }
};

ReactDOM.render(<Message  />, document.getElementById('app'));

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

Answer 1

一种可能的解决方案是保持index每秒递增并渲染那么多单词

＆＃13;

＆＃13;

const arrWords=["I", "would", "like", "to", "print", "one", "word", "per", "second"];
class Message extends React.Component {
  state = {
     count: 0
  };
  componentDidMount() {
    this.timerID = setInterval(()=> {
      console.log(this.state);
      this.setState(prevState => ({
         count: (prevState.count + 1)%arrWords.length
      }))
    }, 1000);
  }
  componentWillUnmount() {
     clearInterval(this.timerID);
  }
	renderWord(word,index) {
      return <span key={index}> {word} </span>;
    }
	renderWords() {
      const words =  arrWords.map((word, index) => {
        if(index <= this.state.count)
      	  return this.renderWord(word, index);
      });
      return words;
    }
    render(){
      return (
        <p>{this.renderWords()}</p>
      );
    }
};

ReactDOM.render(<Message  />, document.getElementById('app'));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为这对你有用。使用React生命周期方法在组件安装和卸载之前开始和结束间隔。只需增加索引，让React处理剩下的工作。

http://my-dashboard.local

Answer 3

上述答案并不正确，但它们也不是很有趣。

使用Promise.resolve()解决此问题。

不太确定你的意思是每秒换一个单词，每次换一个单词，或者每秒换一个单词

替换上一个单词

＆＃13;

＆＃13;

const arrWords=["I", "would", "like", "to", "print", "one", "word", "per", "second"];
class Message extends React.Component {
    state = { word: '', index: 0 };

    renderWord(word,index) {
      return new Promise(( resolve, reject ) => {
        if ( this.wordTimeout ) clearTimeout(this.wordTimeout);
        this.wordTimeout = setTimeout(() => 
          this.setState({ word, index }, resolve), 
          1000
        )
      });
    }

    componentDidMount () {
      arrWords.reduce(( promise, word, index ) => 
      	 promise.then(() => this.renderWord(word, index)), 
         Promise.resolve()
      );
    }

    render(){
      return (
        <p>
          <span key={this.state.index}> {this.state.word} </span>
        </p>
      );
    }
};

ReactDOM.render(<Message  />, document.getElementById('app'));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

追加创建句子

＆＃13;

＆＃13;

const arrWords=["I", "would", "like", "to", "print", "one", "word", "per", "second"];
class Message extends React.Component {
    state = { index: 0 };

    renderSentence (index) {
      return new Promise(( resolve, reject ) => {
        if ( this.wordTimeout ) clearTimeout(this.wordTimeout);
        this.wordTimeout = setTimeout(() => 
          this.setState({ index }, resolve), 
          1000
        )
      });
    }

    componentDidMount () {
      arrWords.reduce(( promise, word, index ) => 
      	 promise.then(() => this.renderSentence(index)), 
         Promise.resolve()
      );
    }

    render(){
      // Plenty of better ways to do this but this will do what you need
      const words = arrWords.slice(0, this.state.index + 1);
      const renderedWords = words.map(word => 
        <span key={`${this.state.index}-${word}`}> {word} </span>
      );
      return (
        <p>
          {renderedWords}
        </p>
      );
    }
};

ReactDOM.render(<Message  />, document.getElementById('app'));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;