请教下数组遍历问题 js

Question

我想遍历的结果是一个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>    );  }

Answer 1

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>

    );

  }

Answer 2

那你的数据结构要先变成[[{},{},{},{}],[{},{},{},{}]]这样吧，然后2层循环，不知道我理解对没

Answer 3

css控制一下，一行能装下4个单元，float自动往下排

Answer 4

那就要把数据解构改改了，要是很多的话让后端改。不多的话前端自己来处理。

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

[

    // 第一行

    [{

      '名称':'a1','编码':'0026'

    },{

      '名称':'a1','编码':'0026'

    },

      '名称':'a1','编码':'0026'

    },{

      '名称':'a1','编码':'0026'

    }],

    // 第二行

    [],

    ...

]