Как создать объект «ключ - значение» из списка объектов

Question

Я довольно новичок в реакции и у меня есть вопрос о том, как создать объект пары ключ-значение в реакции, используя данные, возвращаемые вызову axios get для веб-службы. Сохраните объект в состоянии, а затем прочитайте значения на основе ключей.

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

Чтобы создать карту 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 })
  })

Answer 2

вы можете использовать reduce

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