如何在 ReactJS 中渲染对象数组？

---

在 React 应用程序中渲染数据列表是一项常见的任务，而在 ReactJS 中渲染对象数组非常简单。当您拥有各种对象并希望在 React 组件中显示它们时，可以使用多种方法。本文将引导您了解使用 map()、for、for...of 和 filter() 方法的最常见方法。

在 ReactJS 中渲染对象数组的方法

• 使用 map() 方法
• 使用 for 循环
• 使用 for...of 循环
• 使用 filter() 方法

使用 map() 方法

• map() 方法迭代用户的数组。每个用户对象都返回一个包含用户详细信息的 <li> 元素。
• key 属性对于性能至关重要。它帮助 React 识别哪些项目已更改、添加或删除。使用唯一值（例如 user.id）作为 key。

示例

import React from 'react';

const UserList = () => {
  const users = [
    { id: 1, name: 'Alice', age: 25, active: true },
    { id: 2, name: 'Bob', age: 30, active: false },
    { id: 3, name: 'Charlie', age: 35, active: true }
  ];

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">User List</h1>
      <ul className="space-y-4">
        {users.map(user => (
          <li key={user.id} className="border p-3 rounded shadow">
            <p className="font-semibold">Name: {user.name}</p>
            <p>Age: {user.age}</p>
            <p>Status: {user.active ? 'Active' : 'Inactive'}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

输出

使用 for 循环

• 包含具有 id、name、age 和 active 等属性的用户对象。
• 迭代用户数组中的每个索引：let i = 0; i < users.length; i++：设置循环从索引 0 运行到用户数组的长度。const user=u sers[i]：检索当前索引处的用户对象。items.push(...): 为每个用户创建一个 JSX div，包括他们的姓名、年龄和状态，并将其推入 items 数组。

示例

import React from 'react';

const UserList = () => {
  const users = [
    { id: 1, name: 'Alice', age: 25, active: true },
    { id: 2, name: 'Bob', age: 30, active: false },
    { id: 3, name: 'Charlie', age: 35, active: true }
  ];

  const items = [];
  for (let i = 0; i < users.length; i++) {
    items.push(
      <div key={users[i].id} className="border p-3 rounded shadow mb-4">
        <p className="font-semibold">{users[i].name}</p>
        <p>Age: {users[i].age}</p>
        <p>Status: {users[i].active ? 'Active' : 'Inactive'}</p>
      </div>
    );
  }

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">User List</h1>
      <div>{items}</div>
    </div>
  );
};

export default UserList;

输出

使用 for...of 循环

• for...of 循环迭代用户数组中的每个对象。
• userElements 数组存储为每个用户创建的 JSX 元素。
• key 属性帮助 React 高效地更新列表。

示例

import React from "react";
const UserList = () => {
  const users = [
    { id: 1, name: "Alice", age: 25, active: true },
    { id: 2, name: "Bob", age: 30, active: false },
    { id: 3, name: "Charlie", age: 35, active: true },
  ];

  const userElements = [];
  for (const user of users) {
    userElements.push(
      <div key={user.id}>
        <p>{user.name}</p>
        <p>Age: {user.age}</p>

        <p>Status: {user.active ? "Active" : "Inactive"}</p>
      </div>,
    );
  }
  return <div>{userElements} </div>;
};
export default UserList;

输出

使用 filter() 方法

• 过滤用户数组，仅包含 user.active 为 true 的用户。
• 直接跟随filter()调用来为每个过滤后的用户创建JSX元素

由于这里使用map()渲染过滤后的用户，因此它在技术上是操作的一部分，但其作用与filter()不同。如果不使用map()，则无法仅使用filter()渲染组件，因为filter()仅修改数组，而本身不渲染元素。

示例

import React from "react";
const UserList = () => {
  const users = [
    { id: 1, name: "Alice", age: 25, active: true },
    { id: 2, name: "Bob", age: 30, active: false },
    { id: 3, name: "Charlie", age: 35, active: true },
  ];
  return (
    <div>
      {users
        .filter((user) => user.active)
        .map((user) => (
          <div key={user.id}>
            <p>{user.name} </p>
            <p>Age: {user.age} </p>

            <p>Status: {user.active ? "Active" : "Inactive"}</p>
          </div>
        ))}
    </div>
  );
};
export default UserList;

输出

处理空数组的技巧

如果提供的数组为空，则可以检查以下解决方案。

示例

function UserList() {
  return (
    <div>
      <h1>User List </h1>
      {users.length === 0 ? (
        <p>No users found. </p>
      ) : (
        <ul>
          {users.map((user) => (
            <li>
              <p>Name: {user.name} </p>

              <p>Age: {user.age} </p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

输出