Как перебрать массив вложенных объектов, который, кажется, разбит на страницы? - PullRequest
Новая
       12

Как перебрать массив вложенных объектов, который, кажется, разбит на страницы?

1 голос
/ 13 июня 2019

Я получаю полезную нагрузку через axios, которая является объектом.Внутри этого объекта есть массив с именем "location". Для каждого индекса в массиве есть объект со свойствами.Я пытаюсь перебрать этот объект, установив состояние, и перепробовал много перестановок, но, похоже, не могу его получить.

Вот структура возвращаемых данных из вызова API axios, разбитого на страницы, которые ядумаю, затуманивает мой noggin способ доступа к нему. 

{status: "success", data: {…}}
    data:
        locations: Array(311)
        [0 … 99]
        [100 … 199]
        [200 … 299]
        [300 … 310]
        length: 311
    __proto__: Array(0)
    __proto__: Object

Если я расширяюсь в Chrome Tools, я вижу это: 

[0 … 99]
    0:
        deviceId: 471
        lat: 37.77335
        lon: -122.3863333
        spotterId: "SPOT-300434063282100"
        timestamp: "2019-06-10T19:35:01.000Z"
        __proto__: Object
    1:
        deviceId: 444
        lat: 37.77345
        lon: -122.38695
        spotterId: "SPOT-0319"
        timestamp: "2019-06-10T05:07:31.000Z"
        __proto__: Object

Итак, вы можете расширить [0 ...99] записей, затем [100-199] и так далее ...

Я попробовал следующий код для вызова и повторения в реакции: 

  state = { 
    locations: [] 
  };

  async componentDidMount() {

    try {
      const response = await axios({
        method: 'get',
        url: `my API url`,
        headers: {
          'token': token
        }
      })
      .then(res => {
        const locations = res.data;
        console.log(locations);
        this.setState({ locations });
      });

    } catch (e) {
        console.log(e);
        return;
    }
  }

Я вернул данные в порядке, но перебирая это просто распечатать каждый из атрибутов .... это другое дело.Я попробовал это ниже.не работаетПросто коварная карта не является ошибкой функции.Я не думаю, что я получаю доступ к данным через правильный индекс или неправильно помещаю их в состояние. 

render() {

    const { locations } = this.state;

    return (
      <div>
        <ul>
          {locations.map(location => (
            <li key={location.deviceId}>
              {location.deviceId}
              {location.lat}
              {location.lon}
              {location.spotterId}
              {location.timestamp}
            </li>
          ))}
        </ul>
      </div>
    );
  }

Ожидаемый результат - я хочу отобразить на экране каждый объект и его свойства в массиве.

Ответы [ 2 ]

1 голос
/ 13 июня 2019

Вам нужно деструктурировать локации из response.data:

state = { 
    locations: [] 
}

async componentDidMount() {

    try {
        const response = await axios({
            method: 'get',
            url: `my API url`,
            headers: {
                'token': token
            }
        })

        const { locations } = response.data
        console.log(locations)

        this.setState({ locations })

    } catch (e) {
        console.log(e)
    }
}

render() {
    // ...
}
0 голосов
/ 13 июня 2019

Если это форма данных: 

{status: "success", data: {…}}
    data:
        locations: Array(311)
        [0 … 99]
        [100 … 199]
        [200 … 299]
        [300 … 310]
        length: 311
    __proto__: Array(0)
    __proto__: Object

, установите состояние следующим образом: 

state = {
  records:{
      data:{
         location:[]
        }
      }

Вы получаете объект.Внутри этого объекта есть еще один объект, называемый «data», который содержит массив местоположений.Затем вы можете выполнить итерацию следующим образом. 

render(){
const {records} = this.state;
return{
 <div>
 {records.data.location.map(l => l.deviceId)} // and so on
</div>
}
}
...