如何在Redux Toolkit中恢复原始数据状态？清空搜索输入后返回空数组的问题咨询

首先，咱们来分析下你当前代码的核心问题：你在search reducer里直接修改了state.datas，这就导致原始数据被过滤后的结果直接覆盖了——当你清空搜索框时，没有留存的原始数据可以恢复，自然就返回空数组了。

解决方案思路 #

我们需要在state中同时保存原始数据和过滤后的数据两个独立字段：

• 原始数据字段用来永久存储从接口获取的初始数据，只在接口请求成功时更新
• 过滤后的数据字段用来存储搜索后的结果，供页面渲染使用

修改后的完整代码示例 #

const dataSlice = createSlice({
  name: "data",
  initialState: {
    originalDatas: [], // 新增：存储接口返回的原始数据
    filteredDatas: [], // 新增：存储搜索过滤后的结果
    loading: false,
    error: null
  },
  reducers: {
    search: (state, action) => {
      const searchTerm = action.payload?.toLowerCase().trim();
      if (searchTerm) {
        // 基于原始数据进行过滤，生成新的结果
        state.filteredDatas = state.originalDatas.filter((data) => {
          return data.mission_name.toLowerCase().includes(searchTerm);
        });
      } else {
        // 清空搜索词时，将过滤结果重置为原始数据的副本
        state.filteredDatas = [...state.originalDatas];
      }
    },
  },
  extraReducers: {
    [dataFetch.pending]: (state) => {
      state.loading = true;
      state.error = null;
    },
    [dataFetch.fulfilled]: (state, action) => {
      state.originalDatas = action.payload; // 保存原始数据
      state.filteredDatas = action.payload; // 初始化过滤结果为原始数据
      state.loading = false;
    },
    [dataFetch.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.payload;
    },
  },
});

关键改动说明 #

• 新增originalDatas字段：这个字段只在接口请求成功时更新，后续永远不会被修改，确保原始数据一直存在
• 替换渲染字段：在组件中需要渲染列表时，从store中取出filteredDatas而非原来的datas
• 优化搜索逻辑：清空搜索框时，直接将filteredDatas重置为原始数据的副本，完美恢复初始状态

后续使用注意 #

组件中分发search action的逻辑不需要改动，只需要把原来获取state.data.datas的地方改成state.data.filteredDatas即可。

这样修改后，不管你进行多少次搜索操作，只要清空搜索框，就能立刻回到最开始的原始数据状态啦～

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