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

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

請教下數組遍歷問題 js

請教下數組遍歷問題 js

慕慕森 2019-03-07 14:15:46
我想遍歷的結果是一個table列表,現在的問題是全部數據只遍歷出一行出來了,我想要遍歷多行,每行遍歷出4條數據展示,該怎么弄呢render() {    const data = [{'名稱':'a1','編碼':'0026'},{'名稱':'a2','編碼':'0026'},{'名稱':'a3','編碼':'0026'},{'名稱':'a4','編碼':'0026'},{'名稱':'a5','編碼':'0026'},{'名稱':'a6','編碼':'0026'},{'名稱':'a7','編碼':'0026'},{'名稱':'a8','編碼':'0026'},{'名稱':'a9','編碼':'0026'},...];    return (      <div className="result">        <div>            {              data.map((item,index) =>                <div>                  <p>{item['名稱']}</p>                  <p>{item['編碼']}</p>                </div>              )            }         </div>      </div>    );  }
查看完整描述

4 回答

?
天涯盡頭無女友

TA貢獻1831條經驗 獲得超9個贊

render() {

    const data = [{'名稱':'a1','編碼':'0026'},{'名稱':'a2','編碼':'0026'},{'名稱':'a3','編碼':'0026'},{'名稱':'a4','編碼':'0026'},{'名稱':'a5','編碼':'0026'},{'名稱':'a6','編碼':'0026'},{'名稱':'a7','編碼':'0026'},{'名稱':'a8','編碼':'0026'},{'名稱':'a9','編碼':'0026'},...];

    return (

      <div className="result">

        <div>

            {

               Array.from({length: Math.ceil(data.length / 4)}, (v, i) => i).map(() => {

                  return data.splice(0, 4).map((item, index) => {

                      <div key={index}>

                          <p>{item['名稱']}</p>

                          <p>{item['編碼']}</p>

                      </div>

                  })

                })

            }

         </div>

      </div>

    );

  }


查看完整回答
反對 回復 2019-03-30
?
隔江千里

TA貢獻1906條經驗 獲得超10個贊

那你的數據結構要先變成[[{},{},{},{}],[{},{},{},{}]]這樣吧,然后2層循環,不知道我理解對沒


查看完整回答
反對 回復 2019-03-30
?
米琪卡哇伊

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

css控制一下,一行能裝下4個單元,float自動往下排


查看完整回答
反對 回復 2019-03-30
?
烙印99

TA貢獻1829條經驗 獲得超13個贊

那就要把數據解構改改了,要是很多的話讓后端改。不多的話前端自己來處理。


ps: 后端返回字段的key最好不要使用中文。


[

    // 第一行

    [{

      '名稱':'a1','編碼':'0026'

    },{

      '名稱':'a1','編碼':'0026'

    },

      '名稱':'a1','編碼':'0026'

    },{

      '名稱':'a1','編碼':'0026'

    }],

    // 第二行

    [],

    ...

]


查看完整回答
反對 回復 2019-03-30
  • 4 回答
  • 0 關注
  • 430 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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