如何每三秒渲染一个组件？

Question

import react, {Component} from 'react';

class Test extends component {
    constructor() {
        this.super();
        this.state = {
            message: [1, 2, 3, 4, 5]
        }
    }

    render() {
        return(
            <p>this.state.message</p>
        )
    }
}

如何在每三秒后一个一个地渲染状态为“消息”的项目？ 浏览器上所需的输出如下：

1 2 3 4 5

以上每一项都会在三秒后出现。例如：显示1，然后显示'...'三秒表示加载，然后显示2，然后'...'三秒，以此类推。非常感谢您提前提供的意见！

Answer 1

它与 React 文档中的 this example 非常相似。将当前消息的索引保存在 state 中，从 0 开始，然后在 componentDidMount 中使用 setInterval 调用 setState 来增加它（如果你想这样做，可以环绕，或者当你到达如果你想这样做就结束）。

还有：

• 更正您的extends 子句：Component 应大写。
• 您应该将参数传递给constructor 到super。
• this.super() 上不应该有 this。

类似这样的事情（这个继续前进，而不是停止）：

const { Component } = React;

class Test extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            messages: [1, 2, 3, 4, 5],
            index: 0
        };
    }
    
    componentDidMount() {
      this.timer = setInterval(() => {
        this.setState(({messages, index}) => {
          index = (index + 1) % messages.length;
          return {
            index
          };
        });
      }, 3000); // 3000ms = three seconds
    }

    render() {
        const { index, messages } = this.state;
        return(
            <p>{messages[index]}</p>
        );
    }
}

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

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

<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>

回复：

constructor(...args) {
    super(...args);
    // ...
}

你会看到人们很多这样做，他们也在 React 文档中这样做：

constructor(props) {
    super(props);
    // ...
}

这只会传递 first 参数。早期我养成了传递它们的习惯，但我猜 React 团队可能不会在标准构造函数调用中添加更多参数，因为示例后面有多少代码只传递第一个......

Answer 2

这是另一种选择。

你需要引入一些新的状态来在数字和...之间切换，例如isLoading。

componentDidMount() {
   this.interval = setInterval(() => {
      this.setState(state => {
        if (state.message.length < 2) {
          clearInterval(this.interval);
          return null;
        }

        let newState = [...state.message];
        newState.shift();
        return {message: newState};
      });
   }, 3000);
}

render() {
  return(
    <p>{this.state.message[0]}</p>
  );
}

Answer 3

您可以使用componentDidMount 生命周期钩子和setInterval 来实现结果。

这里正在工作codesandbox

附：正如t-j-crowder 在他的回答中已经提到的那样，它与 Reactjs 文档中的示例非常相似。

Answer 4

您可以尝试使用setTimeout 来控制您想要运行某些东西的最短时间。

class Test extends React.Component {
    constructor(props) {
        super(props);

        this.timeout = 3000;
        this.availableMessages = [1, 2, 3, 4, 5];
        this.state = {
            itemsToShow: [],
            showLoader: false,
        };
    }

    processNextItem = () => {
      const item = this.getItemToShow();
      
      if (item) {
        this.setState({showLoader: true});

        setTimeout(() => {
          this.setState({showLoader: false});
          this.addItemToShow(item, this.processNextItem);
        }, this.timeout);
      }
    }

    getItemToShow = () => this.availableMessages.shift();

    addItemToShow = (item, onAdd) => {
      this.setState(({itemsToShow}) => ({
        itemsToShow: itemsToShow.concat(item)
      }), onAdd);
    }

    componentDidMount() {
      this.addItemToShow(this.getItemToShow());
      this.processNextItem();
    }

    render() {
        return (
           <div>
              {this.state.itemsToShow.map((item, index) => (
                <span key={index}>{item} </span>
              ))}
              {this.state.showLoader && '...'}
           </div>
        )
    }
}

ReactDOM.render(<Test />, 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>