在计时器上循环显示/隐藏React组件

Question

I'm trying to show or hide a series of "pages" on a timer; in other words every x seconds, render a new group of components.

const PAGES = [[<Component1 />, <Component2 />], [<Component3 />, <Component4 />]];

export default class MyDashboard extends Component {
  constructor(props) {
    super(props);
    this.state = { index: -1 };
  }

  renderPages() {
    console.log(this.state.index);
    return PAGES[this.state.index];
  }

  setIndex() {
    let index = this.state.index > PAGES.length ? 0 : this.state.index + 1;
    this.setState({ index: index });
  }

  componentDidMount() {
    this.loop = setInterval(this.setIndex(), 3000);
  }

  componentWillUnmount() {
    clearInterval(this.loop);
  }

  render() {
    return <Dashboard layout={CustomLayout}>{this.renderPages()}</Dashboard>;
  }
}

I'm using the Dashbling framework, but essentially I have an array, PAGES , which is a list of arrays. (I've verified that you can indeed render an array of components, so that's not a problem.)

I'm using the state to store the index , updated with setIndex() , which will increase until it surpasses PAGES.length at which point it will reset to 0.

I put setIndex() inside setInterval() in the hopes that it would call it every x seconds, thus displaying a new group of components, but it only displays the first page, then stops. Any help would be appreciated.

Answer 1

You want this:

this.loop = setInterval(() => this.setIndex(), 3000);

not this

this.loop = setInterval(this.setIndex(), 3000);

Answer 2

setInterval expects a function as its first argument. You are committing a common mistake of passing it the return value of the function (which is undefined ), while calling it just once when the component mounts.

Just remove those parentheses:

componentDidMount() {
    this.loop = setInterval(this.setIndex, 3000);
}

except that the value of this will be lost inside the setIndex method when it is called, so in fact you will also need to ensure the correct this is passed. You can do this using the bind method, or as shown below, with an arrow function:

componentDidMount() {
    this.loop = setInterval(() => this.setIndex(), 3000);
}