如何使用.filter将过滤器添加到Reactjs中的todolist应用程序

import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: '任务1', completed: false },
    { id: 2, text: '任务2', completed: true },
    { id: 3, text: '任务3', completed: false }
  ]);

  const handleFilter = (filterType) => {
    let filteredTodos = [];

    if (filterType === 'completed') {
      filteredTodos = todos.filter(todo => todo.completed);
    } else if (filterType === 'active') {
      filteredTodos = todos.filter(todo => !todo.completed);
    } else {
      filteredTodos = todos;
    }

    // 更新任务列表
    setTodos(filteredTodos);
  };

  return (
    <div>
      <button onClick={() => handleFilter('all')}>全部</button>
      <button onClick={() => handleFilter('completed')}>已完成</button>
      <button onClick={() => handleFilter('active')}>未完成</button>

      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;