代码之家 › 专栏 › 技术社区 › CraZyDroiD

只有最后一项被添加到map函数内的数组中

concatenation reactjs arrays javascript

CraZyDroiD · 技术社区 · 5 年前

我在映射函数中映射一个数组,我想将数组中每个元素的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 我的阵营,不仅仅是最后一个。

4 回复 | 直到 5 年前

grodzi 5 年前

只打电话 setState 一旦进入所有渲染(因为 设置状态 是异步的)

假设你没有在充电站群之间的位置欺骗,只要告诉每个人

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 })
})

没有测试,因为没有最小的可重复的例子,但你得到的想法。。。

blaz 5 年前

原始答案: 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

Zaw Hlaing Bwar 5 年前

你应该用 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 })
    })
})