React SWR，如何过滤/排序数据

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const FilteredData = () => {
  const { data, mutate } = useSWR('/api/data', fetcher);

  const filterData = (data) => {
    // 过滤逻辑
    return data.filter((item) => item.category === 'example');
  };

  const handleFilter = () => {
    mutate(filterData(data));
  };

  return (
    <div>
      <button onClick={handleFilter}>过滤数据</button>
      {data && data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default FilteredData;

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const SortedData = () => {
  const { data, mutate } = useSWR('/api/data', fetcher);

  const sortData = (data) => {
    // 排序逻辑
    return data.sort((a, b) => a.name.localeCompare(b.name));
  };

  const handleSort = () => {
    mutate(sortData(data));
  };

  return (
    <div>
      <button onClick={handleSort}>排序数据</button>
      {data && data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default SortedData;