如何在React應用中實現自定義數據篩選和排序邏輯

要在React應用中實現自定義數據篩選和排序邏輯，可以按照以下步驟進行操作：

1. 創建一個組件用于展示數據，例如一個表格組件。
2. 在組件的state中定義一個用于存儲原始數據的數組，例如data。
3. 創建一些篩選和排序的函數，用于根據用戶輸入對數據進行處理。例如，可以創建一個filterData函數用于根據用戶輸入的條件對數據進行篩選，并創建一個sortData函數用于根據用戶選擇的排序條件對數據進行排序。
4. 在組件中使用這些篩選和排序函數，并在用戶輸入條件或選擇排序條件時調用它們。
5. 在組件中使用map函數將篩選和排序后的數據渲染到表格中展示出來。

例如，可以創建一個簡單的數據篩選和排序的示例組件如下：

import React, { useState } from 'react';

const Table = ({ data }) => {
  const [filteredData, setFilteredData] = useState(data);
  
  const filterData = (condition) => {
    const filtered = data.filter(item => item.name.includes(condition));
    setFilteredData(filtered);
  };
  
  const sortData = (key) => {
    const sorted = [...filteredData].sort((a, b) => a[key] - b[key]);
    setFilteredData(sorted);
  };
  
  return (
    <div>
      <input type="text" placeholder="Filter by name" onChange={(e) => filterData(e.target.value)} />
      <button onClick={() => sortData('age')}>Sort by age</button>
      
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map(item => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;

在這個示例中，Table組件接收一個data數組作為props，然后根據用戶輸入的條件對數據進行篩選和排序，并將結果渲染到表格中展示出來。用戶可以通過輸入條件和點擊按鈕來對數據進行篩選和排序。