在React中使用Redux过滤数组，删除字符时无法恢复完整数据如何解决？

问题根源 #

你的代码核心问题是每次搜索后直接用筛选结果覆盖了Redux中存储的全量用户数据：

• 首次输入关键词筛选后，state.users已经从全量数据变为匹配的子集
• 后续删除关键词时，过滤逻辑是在已经缩小的子集里再次执行，自然无法恢复被过滤掉的原始用户数据

修复方案 #

根据你的使用场景可以选以下两种实现：

方案一：视图层实时筛选（更推荐，仅当前组件用筛选结果时选这个） #

筛选属于临时视图状态，没必要存到Redux里，直接在组件中用原始全量用户数据+当前输入值实时计算即可：

1. Redux中仅保留原始全量用户数据，只有初始拉取、用户增删改操作时才更新，搜索逻辑不动这个字段
2. 组件内逻辑调整如下：

// 组件内从Redux取全量原始用户
const originalUsers = useSelector(state => state.users)
const [inputValue, setInputValue] = useState('')

// 实时计算要渲染的用户列表，不需要修改store
const showUsers = originalUsers.filter(u => u.login.includes(inputValue))

const handleOnChange = (e) => {
  const keyword = e.target.value
  setInputValue(keyword)
  // 删除原有的updateUsers dispatch操作
}

渲染时直接用showUsers遍历即可。

方案二：Redux拆分存储（多组件需要复用筛选结果时选这个） #

修改Redux的users模块结构，拆分两个字段分别存储：

// Redux state 结构示例
{
  originalUsers: [], // 永久存储全量原始数据，仅拉取/增删改时更新
  filteredUsers: [] // 存储筛选后的展示数据，搜索时更新
}

对应的handleOnChange调整如下：

const handleOnChange = (e) => {
  const keyword = e.target.value;
  // 永远基于原始全量数据过滤，不要用filteredUsers做过滤
  const res = state.originalUsers.filter(u => u.login.includes(keyword));
  dispatch(updateFilteredUsers(res));
  setInputValue(keyword);
};

组件渲染时取state.filteredUsers遍历即可。

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