Только последний элемент добавляется в массив внутри функции карты

Question

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

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

const { evc } = this.props;
evc.chargingStationGroups && evc.chargingStationGroups.map((item, key) => {
    item.stations.map((stationItem, key) => {
        console.log("stationID ",stationItem.stationID);
        var stationId = {};
        stationId = {
            stationId: stationItem.stationID
        }
        var allIdArray = this.state.stationIdArray.concat(stationId);
        this.setState({ stationIdArray: allIdArray })
    })
})

Здесь evc.chargingStationGroups выглядит примерно так

[
     {
      groupId: "16",
      groupName: "Sia",
      stations: [{stationId: "8", name: "Test"},{stationId: "9", name: "Test2"},{stationId: "10", name: "Test3"}]
     },
     {
      groupId: "17",
      groupName: "Maroon5",
      stations: [{stationId: "10", name: "Test"},{stationId: "11", name: "Test2"},{stationId: "10", name: "Test3"}]
     }
],

Как я могу добавить все stationItem.stationID в мой массив, а не только последний.

Answer 1

Вызывайте setState только один раз во всем вашем рендеринге (потому что setState является асинхронным)

Предполагая, что у вас нет дубликатов станций между ChargingStationGroups, просто объедините всех

const { evc } = this.props;
if (evc.chargingStationGroups) {
    const ids = evc.chargingStationGroups.flatMap((item, key) => {
        return item.stations.map((stationItem, key) => {
            return {
                stationId: stationItem.stationID
            }
        })
    })
    const stationIdArray = this.state.stationIdArray.concat(ids)
    this.setState({ stationIdArray })
})

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

const { evc } = this.props;
if (evc.chargingStationGroups) {
    const ids = evc.chargingStationGroups.flatMap((item, key) => {
        return item.stations.map((stationItem, key) => {
            return {
                stationId: stationItem.stationID
            }
        })
    })
    const arr = this.state.stationIdArray.concat(ids)
    const s = new Set(arr.map(x => x.stationID))

    const stationIdArray = [...s].map(stationId => ({ stationId }))
    this.setState({ stationIdArray })
})

Не проверено, потому что не приведен минимальный воспроизводимый пример, но вы понимаете ...

Answer 2

Исходный ответ: Что происходит при многократном использовании this.setState в компоненте React?

Вкратце, this.setState группируется и вызывается только один раз в конце цикла,оставляя this.state.stationIdArray пустым все время. Следовательно, сохраняется только результат на последней итерации этого оператора:

var allIdArray = this.state.stationIdArray.concat(stationId);

Избегайте многократного вызова setState в этом случае:

const { evc } = this.props;
if (evc.chargingStationGroups) {
  let allIdArray = [];
  evc.chargingStationGroups.forEach(item => {
    allIdArray = [
      ...allIdArray,
      ...item.stations.map(stationItem => ({
        stationId: stationItem.stationId
      }))
    ];
  });
  this.setState({ stationIdArray: allIdArray });
}

Простой пример: https://codesandbox.io/s/bold-swartz-leto5

Answer 3

Вы должны просто использовать forEach , если хотите выполнять операции во время итерации.

const { evc } = this.props;
evc.chargingStationGroups && evc.chargingStationGroups.forEach((item, key) => {
    item.stations.forEach((stationItem, key) => {
        console.log("stationID ",stationItem.stationID);
        var stationId = {};
        stationId = {
            stationId: stationItem.stationID
        }
        var allIdArray = this.state.stationIdArray.concat(stationId);
        this.setState({ stationIdArray: allIdArray })
    })
})