React TypeScript重构后无法筛选任务问题求助

核心问题定位 #

拆分组件后筛选失效、内容重复，大概率是筛选状态维护错误、子组件props传递偏差或过滤逻辑未正确关联状态导致的，以下是针对性的修复步骤：

1. 先在App组件中维护筛选状态 #

首先确保App里有明确的筛选状态标识，用来控制显示哪种类型的任务：

// App.tsx
import { useState, useMemo } from 'react';
import { AllTasks } from './components/AllTasks';
import { ActiveTasks } from './components/ActiveTasks';
import { DoneTasks } from './components/DoneTasks';
import type { Todo } from './types';

export default function App() {
  const [todos, setTodos] = useState<Todo[]>([]);
  // 维护当前筛选类型：all/done/active
  const [currentFilter, setCurrentFilter] = useState<'all' | 'done' | 'active'>('all');

  // 任务更新回调（确保正确修改任务状态）
  const handleUpdateToDo = (id: string, completed: boolean) => {
    setTodos(prev => prev.map(todo => 
      todo.id === id ? {...todo, completed} : todo
    ));
  };

  // 根据筛选状态计算要显示的任务列表（用useMemo避免重复计算）
  const visibleTodos = useMemo(() => {
    switch(currentFilter) {
      case 'done':
        return todos.filter(todo => todo.completed);
      case 'active':
        return todos.filter(todo => !todo.completed);
      default:
        return todos;
    }
  }, [todos, currentFilter]);

  return (
    <div className="app">
      {/* 筛选按钮组 */}
      <div className="filter-controls">
        <button onClick={() => setCurrentFilter('all')}>全部任务</button>
        <button onClick={() => setCurrentFilter('active')}>活跃任务</button>
        <button onClick={() => setCurrentFilter('done')}>已完成任务</button>
      </div>

      {/* 根据筛选状态渲染对应组件 */}
      {currentFilter === 'all' && <AllTasks todos={visibleTodos} onUpdateToDo={handleUpdateToDo} />}
      {currentFilter === 'active' && <ActiveTasks todos={visibleTodos} onUpdateToDo={handleUpdateToDo} />}
      {currentFilter === 'done' && <DoneTasks todos={visibleTodos} onUpdateToDo={handleUpdateToDo} />}
    </div>
  );
}

2. 修正子组件的props接收逻辑 #

以DoneTasks为例，确保子组件只接收对应筛选后的任务列表，而非全部任务：

// DoneTasks.tsx
import { ToDoItem } from './ToDoItem';
import type { Todo } from '../types';

interface DoneTasksProps {
  todos: Todo[];
  onUpdateToDo: (id: string, completed: boolean) => void;
}

export const DoneTasks = ({ todos, onUpdateToDo }: DoneTasksProps) => {
  return (
    <div className="done-tasks">
      <h2>已完成任务</h2>
      {/* 仅渲染传入的已完成任务，避免重复 */}
      {todos.map(todo => (
        <ToDoItem 
          key={todo.id} 
          todo={todo} 
          onUpdateToDo={onUpdateToDo} 
        />
      ))}
    </div>
  );
};

3. 排查内容重复的关键细节 #

• 检查所有子组件是否误用了原始todos数组而非过滤后的visibleTodos，这是导致内容重复的最常见原因；
• 确保ToDoItem的key使用唯一标识（比如todo.id），避免React渲染时出现DOM节点复用错误；
• 如果是三个模块同时展示而非切换显示，需分别给每个子组件传递对应过滤后的列表：

  // 同时展示三个模块的写法
  <AllTasks todos={todos} onUpdateToDo={handleUpdateToDo} />
  <ActiveTasks todos={todos.filter(t => !t.completed)} onUpdateToDo={handleUpdateToDo} />
  <DoneTasks todos={todos.filter(t => t.completed)} onUpdateToDo={handleUpdateToDo} />
  

4. 验证任务更新回调的传递链 #

确保handleUpdateToDo从App组件传递到子组件，再传递到ToDoItem时没有断裂，ToDoItem中触发复选框变更时要正确调用回调：

// ToDoItem.tsx
import type { Todo } from '../types';

interface ToDoItemProps {
  todo: Todo;
  onUpdateToDo: (id: string, completed: boolean) => void;
}

export const ToDoItem = ({ todo, onUpdateToDo }: ToDoItemProps) => {
  return (
    <div className="todo-item">
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={(e) => onUpdateToDo(todo.id, e.target.checked)}
      />
      <span>{todo.text}</span>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Dilek