React JS: значения массива искажаются при объединении после получения ответа API

Question

У меня есть массив данных, который я отображаю в своем компоненте до 20 записей. После вызова API я получаю еще 20 записей, которые добавляю к существующим 20 записям в компоненте и делаю снова.

Но иногда массив данных, который я отображаю в компоненте, получает беспорядочные данные после вызова API и получения ответа. Иногда данные последнего вызова API перемешиваются до середины массива.

Вот код, который я написал:

this.state = {
  arr = []
}


let apiData = res.data.result

this.setState({
  arr : [...this.state.arr].concat(apiData)
})

Любая помощь будет отличной.

Спасибо.