在 React 中遍历数组（正确方式）

Source: Dev.to

🧠 在 React 中的正确方式：map()

为什么？

因为 React 是声明式的——你描述 UI 应该如何根据数据呈现。

示例

const users = ["Adam", "Sophia", "Lucas"];

👉 这会遍历数组的每个元素并将其转换为 UI。

⚠️ key 的问题（很多人忽视）

❌ 错误写法

{users.map((user, index) => (
  {user}
))}

✅ 正确写法

const users = [
  { id: 1, name: "Adam" },
  { id: 2, name: "Sophia" },
  { id: 3, name: "Lucas" }
];

{users.map(user => (
  {user.name}
))}

👉 始终使用唯一且稳定的值作为 key。

🚫 为什么不要使用 for 或 forEach

“为什么不按以前的方式遍历？”

• forEach() 不返回任何值 → React 无法渲染。
• 传统循环也不太适合 React 的声明式模型。

const [users, setUsers] = useState([]);

渲染

return (
  {users.map(user => (
    - {user.name}
  ))}
);

💥 常见错误

function UserCard({ user }) {
  return {user.name};
}

👉 使用干净、可复用且可扩展的组件。

🚀 结论

React 并不是“遍历”——它把数据转换为 UI。掌握 .map() 是成为 React 开发者的第一步。