React подгрузка данных с сервера long pooling без лишних re render
Нужна помощь в решении тестовой задачи по react js. Есть сервер, который эмулирует long polling и шлет данные пачками. Нужно отправлять на него запросы до тех пор, пока не придет ответ {tickets: [], stop: true}. При этом нужно каждый раз пачку данных дописывать в массив к предыдущей. Пробовал разные варианты, если на каждом этапе обращения к серверу дописывать данные в state, то я получаю кучу лишних re render. А если писать в state по получению stop: true, то получаю только одну пачку данных. Я только учусь, помогите разобраться.
state = {
tickets: [],
stop: false,
searchId: ''
}
getSearchId = async () => {
if (!this.state.searchId && !this.state.stop) {
const response = await axios.get('https://front-test.beta.aviasales.ru/search');
const result = response.data.searchId
this.setState({
searchId: response.data.searchId
})
return result
}
else {
return this.state.searchId
}
}
getTickets = async () => {
try {
const token = await this.getSearchId()
const arrTiskets = await axios.get(`https://front-test.beta.aviasales.ru/tickets?searchId=${token}`)
if (arrTiskets.status == 200) {
console.log('status '+arrTiskets.status)
console.log('len '+arrTiskets.data.tickets.length)
console.log('sid '+token)
if (arrTiskets.data.stop) {
this.setState((prevState: any) => ({
/* tickets: prevState.tickets.concat(arrTiskets.data.tickets), */
stop: true
}))
return arrTiskets.data.tickets
}
else {
/*
this.setState((prevState: any) => ({
tickets: prevState.tickets.concat(arrTiskets.data.tickets),
}))
*/
await this.getTickets()
return arrTiskets.data.tickets
}
}
}
catch (e) {
await this.getTickets()
}
}
async componentDidMount() {
const tickets = await this.getTickets()
this.setState({
tickets
})
}