React中如何条件渲染全部、活跃、已完成三类待办事项列表？

核心思路 #

通过状态跟踪当前筛选类型，根据筛选条件过滤待办数组后再渲染，而非直接渲染全部数据。

具体实现步骤 #

1. 添加筛选状态
   在组件内部定义状态记录当前选中的筛选类型，初始值设为'all'以默认显示全部事项：

import { useState } from 'react';

// ... 保留组件原有状态（如todos、bool等）
const [filter, setFilter] = useState('all');

2. 编写过滤逻辑
   根据当前筛选状态，返回对应的待办事项数组：

const getFilteredTodos = () => {
  if (filter === 'active') {
    return todos.filter(item => !item.completed); // 筛选未完成的活跃事项
  } else if (filter === 'completed') {
    return todos.filter(item => item.completed); // 筛选已完成的事项
  }
  return todos; // 默认返回全部事项
};

3. 修改渲染逻辑
   将原直接渲染todos的代码，替换为渲染过滤后的数组：

// 替换原有的todos.map部分
{
  getFilteredTodos().map((item, index) =>
    item.isEditing ? <TodoEditForm item={item} key={index} editTask={editTask} /> :
    <Todo item={item} key={index}
      toggleCompleted={toggleCompleted}
      removeTodo={removeTodo}
      toggleEdit={toggleEdit} />
  )
}

4. 给切换按钮绑定事件
   为三个按钮添加点击事件，更新筛选状态：

<div className='toggle-todos-wrapper'>
  <button className="toggle-todos-button btn btn-light" onClick={() => setFilter('all')}>All</button>
  <button className="toggle-todos-button btn btn-light" onClick={() => setFilter('active')}>Active</button>
  <button className="toggle-todos-button btn btn-light" onClick={() => setFilter('completed')}>Completed</button>
</div>

完整修正后的组件return部分 #

return (
  <div className='card'>
    <TodoForm addTodo={addTodo} />
    <div className='list-group'>
      {
        getFilteredTodos().map((item, index) =>
          item.isEditing ? <TodoEditForm item={item} key={index} editTask={editTask} /> :
          <Todo item={item} key={index}
            toggleCompleted={toggleCompleted}
            removeTodo={removeTodo}
            toggleEdit={toggleEdit} />
        )
      }
    </div>
    <div className='toggle-todos-wrapper'>
      <button className="toggle-todos-button btn btn-light" onClick={() => setFilter('all')}>All</button>
      <button className="toggle-todos-button btn btn-light" onClick={() => setFilter('active')}>Active</button>
      <button className="toggle-todos-button btn btn-light" onClick={() => setFilter('completed')}>Completed</button>
    </div>
  </div>
)

问题说明 #

你之前尝试的三元运算符仅控制了"Active"/"Completed"文本的显示，未对渲染的待办数组做过滤，因此全部事项依然会显示。通过上述步骤，先根据筛选状态过滤数组，再渲染过滤后的结果，即可实现列表切换效果。

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