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

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 = { 

    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() {

    // ...

}

Answer 2

如果这是数据的形式：

{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:[]

        }

      }

您正在接收一个对象。在该对象内部还有另一个称为“数据”的对象，它保存一个位置数组。然后你可以像这样迭代。

render(){

const {records} = this.state;

return{

 <div>

 {records.data.location.map(l => l.deviceId)} // and so on

</div>

}

}