ReactJS - testInstance.findAll() 方法

函式 `testInstance.findAll(test)` 是一個模擬的或通用的方法，它可能存在於程式設計環境中。`testInstance` 代表程式中的一個例項或物件。術語“testInstance”只是一個佔位符，應該替換為我們正在使用的例項的真實名稱。`findAll` 方法或函式可以在 `testInstance` 物件上呼叫。這意味著我們想要根據特定條件查詢或收集某些內容。

語法

testInstance.findAll(test)

引數

test − 作為引數，我們傳遞另一個名為 test 的函式。這是在程式碼的其他地方定義的函式。此函式檢查集合中每個專案是否滿足特定條件。

返回值

findAll 方法返回一個集合（例如陣列、列表或其他資料結構），其中包含 `testInstance` 中滿足 `test` 函式中定義的條件的所有專案。

示例

示例 - 過濾待辦事項列表

首先，我們將建立一個應用程式，其中包含一個 TodoList 元件。此元件提供一個簡單的待辦事項列表，並能夠根據使用者輸入篩選和顯示已完成或未完成的待辦事項。此應用程式的程式碼如下：

TodoList.js

import React, { useState } from 'react';

const TodoList = ({ todos }) => {
   const [showCompleted, setShowCompleted] = useState(false);
   
   // findAll method
   const findAll = (testFunction) => (todos || []).filter(testFunction);
   
   const test = (todo) => {
      return showCompleted ? todo.completed : !todo.completed;
   };
   
   const filteredTodos = findAll(test);
   
   return (
      <div>
         <label>
         <input
            type="checkbox"
            checked={showCompleted}
            onChange={() => setShowCompleted(!showCompleted)}
         />
            Show Completed
         </label>
         <ul>
            {filteredTodos.map((todo) => (
               <li key={todo.id}>{todo.text}</li>
            ))}
         </ul>
      </div>
   );
};

export default TodoList;

輸出

該元件顯示一個複選框，允許我們選擇顯示已完成的任務還是未完成的任務。然後，篩選後的待辦事項將顯示在一個無序列表中。

示例 - 過濾產品應用

在這個示例中，我們將建立一個 ProductList 元件。此元件提供一個簡單的產品列表，並能夠根據所選類別篩選和顯示產品。使用者可以從下拉選單中選擇一個類別，列表將相應更新。

ProductList.js

import React, { useState } from 'react';

const ProductList = ({ products }) => {
   const [selectedCategory, setSelectedCategory] = useState('all');
   
   // findAll method
   const findAll = (testFunction) => (products || []).filter(testFunction);
   
   const test = (product) => {
      return selectedCategory === 'all' || product.category === selectedCategory;
   };
   
   const filteredProducts = findAll(test);
   
   return (
      <div>
         <label>
            Select Category:
            <select
               value={selectedCategory}
               onChange={(e) => setSelectedCategory(e.target.value)}
            >
               <option value="all">All</option>
               <option value="electronics">Electronics</option>
               <option value="clothing">Clothing</option>
            </select>
         </label>
         <ul>
            {filteredProducts.map((product) => (
               <li key={product.id}>{product.name}</li>
            ))}
         </ul>
      </div>
   );
};

export default ProductList;

輸出

示例 - 過濾使用者列表

在這個應用程式中，UserList 是一個函式式元件，它接受一個名為 users 的 prop，以及一個使用者專案的陣列。findAll 方法根據提供的 testFunction 篩選使用者。它檢查使用者是否未定義或為空，並在那種情況下使用空陣列。test 函式用作篩選條件。它檢查是顯示活躍使用者（showActive === true）還是非活躍使用者。

UserList.js

import React, { useState } from 'react';

const UserList = ({ users }) => {
   const [showActive, setShowActive] = useState(true);
   
   // findAll method
   const findAll = (testFunction) => (users || []).filter(testFunction);
   
   const test = (user) => {
      return showActive ? user.status === 'active' : user.status === 'inactive';
   };
   
   const filteredUsers = findAll(test);
   
   return (
      <div>
         <label>
            <input
               type="checkbox"
               checked={showActive}
               onChange={() => setShowActive(!showActive)}
            />
            Show Active Users
         </label>
         <ul>
            {filteredUsers.map((user) => (
               <li key={user.id}>{user.name}</li>
            ))}
         </ul>
      </div>
   );
};

export default UserList;

輸出

總的來說，此元件提供一個簡單的使用者列表，可以根據活躍/非活躍狀態進行篩選和顯示。使用者可以切換複選框以顯示活躍使用者或非活躍使用者。

總結

findAll 方法提供了一種便捷的方式，可以根據 `test` 函式中定義的特定條件篩選和收集來自較大集合的專案。實際結果是一個新集合，其中只包含透過測試的專案。因此，我們已經看到了使用此函式的不同應用程式，以獲得在測試中使用此方法的實踐經驗。