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

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

const { evc } = this.props; evc.chargingStationGroups {amp}amp;{amp}amp; evc.chargingStationGroups.map((item, key) ={amp}gt; { item.stations.map((stationItem, key) ={amp}gt; { 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 в мой массив, а не только последний.

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

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

 const { evc } = this.props; if (evc.chargingStationGroups) { const ids = evc.chargingStationGroups.flatMap((item, key) ={amp}gt; { return item.stations.map((stationItem, key) ={amp}gt; { 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) ={amp}gt; { return item.stations.map((stationItem, key) ={amp}gt; { return { stationId: stationItem.stationID } }) }) const arr = this.state.stationIdArray.concat(ids) const s = new Set(arr.map(x ={amp}gt; x.stationID)) const stationIdArray = [...s].map(stationId ={amp}gt; ({ stationId })) this.setState({ stationIdArray }) }) 

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

Оригинальный ответ: Что происходит при многократном использовании 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 ={amp}gt; { allIdArray = [ ...allIdArray, ...item.stations.map(stationItem ={amp}gt; ({ stationId: stationItem.stationId })) ]; }); this.setState({ stationIdArray: allIdArray }); } 

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

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

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