react循环渲染数据

react循环输出元素

代码说明：index—>索引
key：循环语句时的唯一标识

一、循环普通数组

1、map循环方式（foreach同理）

render() {
  const items = ["山东", "菏泽", "牡丹之乡"];
  return (
    <div>
      {items.map(item => (
        <div key={item}>{item}</div>
      ))}
      {/*key的唯一标识之索引方式*/}
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
}

2、for循环方式

render() {
  const items = ["菏泽", "牛牛牛", "牡丹之乡"];
  var result = [];
  for (var i = 0; i < items.length; i++) {
    result.push(<div key={i}>{items[i]}</div>)
  }
  return (
    </div>
      {result}
    </div>
  );
}

二、循环json字符串

render() {
  const items = [
    { id: 2, name: '胡晓恒' },
    { id: 1, name: 'hxh' },
    { id: 0, name: 'huxiaoheng' }
  ];
  return (
    <div>
      {items.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
    </div>
  );
}

三、循环对象object

2、实现方式2

render() {
  const items = {
    "id2": "hhh",
    "id1": "xxx",
    "id0": "hhhkkk",
  }
  var result = [];
  for (const key in items) {
    result.push(<div key={key}>{items[key]}</div>)
  }
  return (
    <div>
      {result}
    </div>
  );
}

1、实现方式1

import React from 'react'
const objData = {
  1: '我是第一条数据',
  2: '我是第二条数据',
  3: '我是第三条数据',
}
export default function ForRender() {
  return (
    <div>
      <ul>
        {
          Object.entries(objData).map(([id, text]) => {
            return <li key={id}>{id + '、' + text}</li>
          })
        }
      </ul>
    </div>
  )
}

这里最应该注意的就是，一定要输出key={}，而且{}内部要保证这个值的唯一性。

四、实战环节

后台给的数据肯定错综复杂，就比如：（我只想循环遍历这里面的所有username的值）。

function App() {
    const items = [
        {
            id1: [
                { id: 1, username: "胡晓恒1" },
                { id: 2, name: "hxh" },
                { id: 3, name: "huxiaoheng" },
            ],
        },
        {
            id1: [
                { id: 4, username: "胡晓恒2" },
                { id: 5, name: "hxh" },
                { id: 6, name: "huxiaoheng" },
            ],
        },
    ];
    let result = [];
    for (var i = 0; i < items.length; i++) {
        result.push(items[i].id1[0]);
    }
    return (
        <div>
            {result.map((item) => (
                <div key={item.id}>{item.username}</div>
            ))}
        </div>
    );
}

export default App;