Как зациклить синхронизацию с GET-запросом - Async Redux

Question

const measurements: { name: string, station: string, data: any[] }[] = [];
for (const selectedTrack of selectedTracks) {
    for (const trackCircuitId of selectedTrack.tcIDs) {
        await this.props.loadMeasurements(dateFrom, dateTo, trackCircuitId, selectedTrack.station);
        console.log(this.props.measurements);
        measurements.push({
            name: trackCircuitId,
            station: selectedTrack.station,
            data: this.props.measurements
        });
    }
}

this.setState({
    measurements: measurements,
    refresh: false
});

ждите this.props.loadMeasurements (dateFrom, dateTo, trackCircuitId, selectedTrack.station);

Вызывает функцию действия, а this.props.measurements - это реквизит, возвращаемый Redux.!Я пытаюсь заполнить список измерений и обновить его состояние, когда закончите, и отобразить диаграмму.

Атм.когда я загружаю данные из this.props.measurements (...), this.props.measurements является асинхронным и пустым.Что делает данные всегда быть [].

Может использовать componentDidUpdate, но проблема заключается в циклах.

Answer 1

Попробуйте использовать эту пользовательскую функцию цикла вместо for

const asyncForEach = async function (array, callback) {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array)
  }
}

const asyncLoop = async () => {
  const measurements: { name: string, station: string, data: any[] }[] = [];
  try {
    await asyncForEach(selectedTracks, async selectedTrack => {
      await asyncForEach(selectedTrack.tcIDs, async trackCircuitId => {
        await this.props.loadMeasurements(dateFrom, dateTo, trackCircuitId, selectedTrack.station);
        console.log(this.props.measurements) // If it works well
        measurements.push({
          name: trackCircuitId,
          station: selectedTrack.station,
          data: this.props.measurements
        });
      })
    })

    this.setState({
      measurements,
      refresh: false
    });
  } catch (err) {
    console.log(err)
  }
}

asyncLoop()