亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何迭代似乎已分頁的嵌套對象數組?

如何迭代似乎已分頁的嵌套對象數組?

DIEA 2021-06-28 12:39:18
我通過 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>    );  }預期結果是我想將每個對象及其在數組中的屬性呈現到屏幕上
查看完整描述

2 回答

?
MYYA

TA貢獻1868條經驗 獲得超4個贊

您需要從 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() {

    // ...

}


查看完整回答
反對 回復 2021-07-01
?
慕絲7291255

TA貢獻1859條經驗 獲得超6個贊

如果這是數據的形式:


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

}

}


查看完整回答
反對 回復 2021-07-01
  • 2 回答
  • 0 關注
  • 125 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號