我正在用NextJS 13开发一个Todo应用程序，包括应用程序目录、prisma、redux工具包、shadcnui和clerk。我的APP里有两个组件。一个是TodoList，另一个是Filter。在TodoList中，我使用RTK Query检索所有的todos。在Filter组件中，我想根据这些待办事项是否完成来过滤它们。我正在寻找最有效的解决方案。
我目前的做法是这样的：

'use client';

import AddTodoSheet from '@/components/AddTodoSheet';
import Filter from '@/components/Filter';
import TodoList from '@/components/TodoList';
import { Separator } from '@/components/ui/separator';
import { useGetTodosQuery } from '@/redux/features/api/apiSlice';
import { Todo } from '@prisma/client';
import React from 'react';

const TodoPage = () => {
  const { data, isLoading, isError } = useGetTodosQuery({});
  const [filter, setFilter] = React.useState(null);
  const [todos, setTodos] = React.useState(data);

  React.useEffect(() => {
    let filteredTodos = [];

    if (filter === 'completed') {
      filteredTodos = data?.filter((todo: Todo) => todo.isCompleted === true);
      setTodos(filteredTodos);
    }

    if (filter === 'waiting') {
      filteredTodos = data?.filter((todo: Todo) => todo.isCompleted === false);
      setTodos(filteredTodos);
    }

    if (filter === 'all') {
      filteredTodos = data;
      setTodos(filteredTodos);
    }
  }, [filter, data]);

  return (
    <div className=''>
      <div className='flex items-center justify-between mt-2'>
        <Filter filter={filter} setFilter={setFilter} />
        <AddTodoSheet />
      </div>
      <Separator className='my-2' />
      <div className=''>{!isLoading && <TodoList data={todos || data} />}</div>
    </div>
  );
};

export default TodoPage;

import React from 'react';
import TodoItem from './TodoItem';
import { Todo } from '@prisma/client';

const TodoList = ({ data }: { data: any }) => {
  return (
    <div>
      {data.map((todo: Todo) => (
        <TodoItem key={todo.id.toString()} todo={todo} />
      ))}
    </div>
  );
};

export default TodoList;

import React from 'react';
import { Tabs, TabsList, TabsTrigger } from './ui/tabs';

const Filter = ({ filter, setFilter }: { filter: any; setFilter: any }) => {
  return (
    <Tabs defaultValue='all' onValueChange={(e) => setFilter(e)}>
      <TabsList>
        <TabsTrigger value='all'>All</TabsTrigger>
        <TabsTrigger value='completed'>Completed</TabsTrigger>
        <TabsTrigger value='waiting'>Waiting</TabsTrigger>
      </TabsList>
    </Tabs>
  );
};

export default Filter;

有没有更好的解决办法？