时间戳

首页 > 解决方案 > 只有最后一项被添加到地图函数内的数组中

javascript - 只有最后一项被添加到地图函数内的数组中

问题描述

我在 map 函数中映射一个数组，我想将数组中每个元素的 id 添加到一个状态。我面临一个问题，即使控制台日志显示函数迭代到正确的次数，也只有最后一项被添加到数组中。

这是我写的代码

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到我的数组中，而不仅仅是最后一个。

标签： javascriptarraysreactjsconcatenation

解决方案

原始答案：在 React 组件中多次使用 this.setState 会发生什么？

简而言之，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

推荐阅读