如何在 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>
  );
}

輸出