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

Question

我试图在计时器上显示或隐藏一系列“页面”；换句话说，每隔 x 秒，渲染一组新的组件。

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

我正在使用 Dashbling框架，但本质上我有一个数组 PAGES，它是一个数组列表。 (我已经验证你确实可以渲染一个组件数组，所以这不是问题。)

我正在使用状态来存储 index，用 setIndex() 更新，它会增加直到超过 PAGES.length此时它将重置为 0。

我将 setIndex() 放在 setInterval() 中，希望它每 x 秒调用一次，从而显示一组新的组件，但它只显示第一页，然后停止。任何帮助将不胜感激。

Answer 1

setInterval 需要一个函数作为它的第一个参数。您犯了一个常见的错误，即向它传递函数的返回值(未定义)，而在组件安装时仅调用一次。

只需删除那些括号:

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

除了 this 的值在 setIndex 方法中被调用时会丢失，所以实际上你还需要确保正确的 this 已通过。您可以使用 bind 方法或如下所示使用箭头函数执行此操作:

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