请教下数组遍历问题 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() {&nbsp; &nbsp; const data = [{'名称':'a1','编码':'0026'},{'名称':'a2','编码':'0026'},{'名称':'a3','编码':'0026'},{'名称':'a4','编码':'0026'},{'名称':'a5','编码':'0026'},{'名称':'a6','编码':'0026'},{'名称':'a7','编码':'0026'},{'名称':'a8','编码':'0026'},{'名称':'a9','编码':'0026'},...];&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="result">&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Array.from({length: Math.ceil(data.length / 4)}, (v, i) => i).map(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return data.splice(0, 4).map((item, index) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{item['名称']}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{item['编码']}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }

Answer 2

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

Answer 3

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

Answer 4

那就要把数据解构改改了，要是很多的话让后端改。不多的话前端自己来处理。ps: 后端返回字段的key最好不要使用中文。[&nbsp; &nbsp; // 第一行&nbsp; &nbsp; [{&nbsp; &nbsp; &nbsp; '名称':'a1','编码':'0026'&nbsp; &nbsp; },{&nbsp; &nbsp; &nbsp; '名称':'a1','编码':'0026'&nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; '名称':'a1','编码':'0026'&nbsp; &nbsp; },{&nbsp; &nbsp; &nbsp; '名称':'a1','编码':'0026'&nbsp; &nbsp; }],&nbsp; &nbsp; // 第二行&nbsp; &nbsp; [],&nbsp; &nbsp; ...]