如何迭代似乎已分页的嵌套对象数组？

Question

我通过 axios 接收有效载荷，这是一个对象。在这个对象中，有一个名为“locations”的数组。对于数组中的每个索引，都有一个具有属性的对象。我试图通过设置状态来迭代这个对象，并尝试了很多排列，但似乎无法得到它。

这是从 axios API 调用返回的数据的结构，它是分页的，我认为这使我无法访问它。

{status: "success", data: {…}}

    data:

        locations: Array(311)

        [0 … 99]

        [100 … 199]

        [200 … 299]

        [300 … 310]

        length: 311

    __proto__: Array(0)

    __proto__: Object

如果我在 Chrome 工具中展开，我会看到：

[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>

    );

  }

预期结果是我想将每个对象及其在数组中的属性呈现到屏幕上

Answer 1

您需要从 response.data 中解构位置：state = {&nbsp;&nbsp; &nbsp; locations: []&nbsp;}async componentDidMount() {&nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; &nbsp; const response = await axios({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: 'get',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: `my API url`,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'token': token&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; const { locations } = response.data&nbsp; &nbsp; &nbsp; &nbsp; console.log(locations)&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ locations })&nbsp; &nbsp; } catch (e) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(e)&nbsp; &nbsp; }}render() {&nbsp; &nbsp; // ...}

Answer 2

如果这是数据的形式：{status: "success", data: {…}}&nbsp; &nbsp; data:&nbsp; &nbsp; &nbsp; &nbsp; locations: Array(311)&nbsp; &nbsp; &nbsp; &nbsp; [0 … 99]&nbsp; &nbsp; &nbsp; &nbsp; [100 … 199]&nbsp; &nbsp; &nbsp; &nbsp; [200 … 299]&nbsp; &nbsp; &nbsp; &nbsp; [300 … 310]&nbsp; &nbsp; &nbsp; &nbsp; length: 311&nbsp; &nbsp; __proto__: Array(0)&nbsp; &nbsp; __proto__: Object然后像这样设置状态：state = {&nbsp; records:{&nbsp; &nbsp; &nbsp; data:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;location:[]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }您正在接收一个对象。在该对象内部还有另一个称为“数据”的对象，它保存一个位置数组。然后你可以像这样迭代。render(){const {records} = this.state;return{&nbsp;<div>&nbsp;{records.data.location.map(l => l.deviceId)} // and so on</div>}}