Question

我正在使用@来轮询请求并使我的应用程序实时运行，我认为这可能是导致提取请求持续到来的罪魁祸首。这是我的React组件：

setInterval

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

Answer 1

您错过了这个间隔。您设置了两个间隔。请至少删除一个。您已清除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 })
    })
  }
}

Answer 2

您开始两个间隔，而忘记第一个间隔。

第一个将在实例初始化时启动，第二个将在componentDidMount()中启动。但是第二个将覆盖对第一个间隔的引用，该引用将不会在componentWillUnmount()中删除。您应该仅在componentDidMount()中设置时间间隔，并使用null对其进行初始化：

export default class ChatBox extends Component<ChatBoxProps, ChatBoxState> {
    interval = null;

    componentDidMount () {
        this.interval = setInterval(() => this.fetchComments(), 500);
        /* ... */
    }

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

    /* ... */
}

由于setInterval，React组件不会停止获取数据

2 个答案: