React中如何展示搜索筛选后的特定任务？结合Redux实现

嗨，这问题其实很容易解决！你只需要把之前用来渲染的tasks.map替换成调用getTasksWithSearch()返回的数组来执行map就可以了。

直接替换的实现方式 #

原来你可能是这样渲染所有任务的：

tasks.map(task => (
  <div key={task.id}>{task.name}</div>
))

现在改成调用你的筛选函数后的结果：

getTasksWithSearch().map(task => (
  <div key={task.id}>{task.name}</div>
))

这样每次用户输入搜索内容时，search状态更新，组件重新渲染，getTasksWithSearch()就会返回最新的筛选结果，页面也就自动展示符合条件的任务了。

优化你的筛选函数 #

另外，你的getTasksWithSearch用forEach的写法有点繁琐，其实可以用数组的filter方法简化代码，逻辑更清晰：

const getTasksWithSearch = () => {
  // 使用includes替代search，更直观，空字符串时会返回所有任务
  return tasks.filter(task => task.name.includes(search));
}

进阶：用useMemo优化性能 #

如果你的任务列表很大，每次渲染都重新计算筛选结果可能会影响性能，这时候可以用useMemo把筛选后的结果缓存起来，只有当tasks或search变化时才重新计算：

import { useMemo } from 'react';

// 缓存筛选后的任务列表
const filteredTasks = useMemo(() => {
  return tasks.filter(task => task.name.includes(search));
}, [tasks, search]); // 依赖项：只有tasks或search变化时才重新计算

// 渲染时直接用缓存后的结果
filteredTasks.map(task => (
  <div key={task.id}>{task.name}</div>
))

这样既保证了功能正常，又提升了组件的性能表现。

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