请教下数组遍历问题 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'
    }],
    // 第二行
    [],
    ...
]