Question

我反应很新，并且有一个查询，关于如何使用返回到axios get调用Web服务的数据来在反应中创建键值对对象。将对象保存为状态，然后再根据键读取值。

axios.get('/api/locations/')
    .then(r => r.data )
    .then(types => this.setState({types}))

我从后端得到一个List<LocationType>，并且LocationType对象具有两个属性：

String locationId
String locationName

现在，我想使用以下类型的对象创建一个哈希图：

{ "1": "London", "2": "Berlin"...... etc}

我正在尝试执行类似的操作，但不确定如何将键值分配给对象

axios.get('/api/locations/types')
    .then(r => r.data )
    .then(types => this.setState({types}))
    .then(types => {
        this.state.types.map((type => {
            //create a map object and here but how?
        }))
    })

实现此目标的最佳方法是什么？

Answer 1

您可以使用reduce

this.setState(() => {
  return {
    types: types.reduce((map, type) => {
     map[type. locationId] = type.locationName;
     return map;
   }, {})
  }
})

Answer 2

要创建localionNames的映射，请对数据运行循环并首先准备一个对象。另外，您可以一次通话即可完成setState，而无需两次。

这样写：

axios.get('/api/locations/types')
  .then(r => r.data)
  .then(types => {

    // map object
    let mapObj = {};

    // run a loop on types and create the map
    types.forEach((type, i) => {
      mapObj[type.locationId] = type.locationName;
    })

    // update all the values in single setState
    this.seState({ types, typesMap: mapObj })
  })

如何从对象列表创建键-值对象

2 个答案: