当前位置：首页 > React

react得到的数据如何遍历

2026-01-25 07:13:29React

遍历数组数据

在React中遍历数组数据通常使用map方法，该方法会返回一个新的数组，适合渲染列表元素。确保为每个元素添加唯一的key属性以提高性能。

const data = ["Apple", "Banana", "Orange"];

function ListComponent() {
  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

遍历对象数据

对于对象数据，可以先将对象的键或值转换为数组再进行遍历。使用Object.keys()、Object.values()或Object.entries()方法。

const user = { name: "John", age: 30, city: "New York" };

function UserInfo() {
  return (
    <div>
      {Object.entries(user).map(([key, value]) => (
        <p key={key}>{`${key}: ${value}`}</p>
      ))}
    </div>
  );
}

条件渲染与过滤

在遍历前可以通过filter方法过滤数据，结合条件渲染逻辑。例如只显示符合条件的项。

const numbers = [1, 2, 3, 4, 5];

function EvenNumbers() {
  return (
    <ul>
      {numbers.filter(num => num % 2 === 0).map(num => (
        <li key={num}>{num}</li>
      ))}
    </ul>
  );
}

处理嵌套数据

对于嵌套结构的数据（如数组内包含对象），可以通过多级遍历或递归组件实现。

const nestedData = [
  { id: 1, items: ["A", "B"] },
  { id: 2, items: ["C", "D"] }
];

function NestedList() {
  return (
    <ul>
      {nestedData.map(group => (
        <li key={group.id}>
          {group.id}
          <ul>
            {group.items.map(item => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  );
}

性能优化

对于大型数据集，考虑使用虚拟滚动库（如react-window）或分页加载，避免一次性渲染所有元素导致性能问题。

import { FixedSizeList as List } from 'react-window';

const bigData = Array(1000).fill().map((_, i) => `Item ${i + 1}`);

function BigList() {
  return (
    <List
      height={400}
      itemCount={bigData.length}
      itemSize={50}
      width={300}
    >
      {({ index, style }) => (
        <div style={style}>{bigData[index]}</div>
      )}
    </List>
  );
}

react得到的数据如何遍历