Компонент React не остановит выборку данных из-за setInterval

Question

Я использую setInterval для опроса запросов и создания своего приложения в реальном времени, и я думаю, что это может быть причиной того, что запросы на получение продолжают поступать.Это мой компонент React:

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

Есть ли способ предотвратить такое поведение?

Answer 1

Вы запускаете два интервала и забываете о первом.

Первый будет запущен при инициализации экземпляра, а второй - в 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);
    }

    /* ... */
}

Answer 2

Вы пропустили этот интервал.Вы установили два интервала.Пожалуйста, удалите по крайней мере один.Вы очистили этот интервал, а не интервал.

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