Question

这是我目前正在努力实现的基本要点：我有一个对象列表（推荐），每三秒钟自动切换一次。现在，我正在使用componentDidMount上的基本setInterval方法和默认情况下设置为3秒的“计时器”状态，并在使用按钮时将其更改为10秒。

我要做的是，一旦手动更改了特色对象，就冻结“计时器”并显示此证明超过三秒钟。

我尝试在componentDidUpdate内部设置setTimeout

以下是相关代码：

setTestimonial = (testimonial, currentTestimonialIndex, buttoned) => {
    if (buttoned) {
      this.setState({ timer: 5000 });
    } else {
      this.setState({ timer: 1000 });
    }
    this.setState({ testimonial });
    this.setState({ currentTestimonialIndex });
  };

nextTestimonial = (testimonials, buttoned) => {
    const currentIndex = this.state.currentTestimonialIndex;

    let nextIndex;

    if (currentIndex === testimonials.length - 1) {
      nextIndex = 0;
    } else {
      nextIndex = currentIndex + 1;
    }

    this.setTestimonial(testimonials[nextIndex], nextIndex, buttoned);
  };

如果您想知道为什么需要setTestimonial，也可以通过单击其上方的缩略图列表来更改精选功能

componentDidMount() {
    setTimeout(
      () => this.nextTestimonial(this.props.testimonials, false),
      this.state.timer
    );
  }

componentDidUpdate() {
    setTimeout(
      () => this.nextTestimonial(this.props.testimonials, false),
      this.state.timer
    );
    console.log("Component updated, timer:", this.state.timer);
  }

问题：每次更改状态时都会触发componentDidUpdate，但是在延迟之后它本身也会更改状态。因此，它再次触发。然后在三秒钟后触发另一个状态更改，然后触发另一个，依此类推，直到它以光速滑过所有状态。

因此，我正在寻找一种方法来禁用状态更改达x秒钟的时间，或者只是其他任何常规方法来解决此问题。

感谢您的帮助！

在React中冻结状态x秒钟？

0 个答案: