时间戳

首页 > 解决方案 > React 组件不会因为 setInterval 而停止获取数据

reactjs - React 组件不会因为 setInterval 而停止获取数据

问题描述

我setInterval用来轮询请求并使我的应用程序实时，我认为这可能是获取请求不断出现的罪魁祸首。这是我的反应组件：

export default class ChatBox extends Component<ChatBoxProps, ChatBoxState> {
  interval = setInterval(() => this.fetchComments(), 500)
  state = {
    comments: [],
    content: '',
  }

  componentDidMount () {
    this.interval = setInterval(() => this.fetchComments(), 500)
    this.scrollToBottom()
  }

  componentDidUpdate () {
    this.scrollToBottom()
  }

  componentWillUnmount () {
    clearInterval(this.interval)
  }

  fetchComments = () => {
    fetchComments().then(comments => {
      this.setState({ comments })
    })
  }
}

有没有办法防止这种行为？

标签： reactjssetinterval

解决方案

你错过了这个时间间隔。您设置了两个间隔。请至少删除一个。您已清除 this.interval 而不是间隔。

export default class ChatBox extends Component<ChatBoxProps, ChatBoxState> {

  state = {
    comments: [],
    content: '',
  }

  componentDidMount () {
    this.interval = setInterval(() => this.fetchComments(), 500)
    this.scrollToBottom()
  }

  componentDidUpdate () {
    this.scrollToBottom()
  }

  componentWillUnmount () {
    clearInterval(this.interval)
  }

  fetchComments = () => {
    fetchComments().then(comments => {
      this.setState({ comments })
    })
  }
}

推荐阅读