Question

我正在将一个数组映射到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添加到我的数组中，而不仅仅是最后一个。

Answer 1

在所有渲染中仅调用一次setState（因为setState是异步的）

假设您在chargeingStationGroups之间没有站点的重复，那么就让所有人都拥戴起来

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

原始答案：What happens when using this.setState multiple times in React component?

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

仅将最后一项添加到map函数内部的数组

3 个答案: