React筛选时避免Local Storage被修改的问题求助

核心问题分析 #

1. Reducer逻辑致命错误：searchNotes分支执行过滤后未返回新状态，导致全局状态被重置为undefined，进而触发localStorage写入undefined，清空查询词后无原始数据可恢复。
2. 状态设计不合理：直接用过滤结果覆盖全局原始笔记数据，破坏了数据源的完整性，无法回溯完整列表。
3. 查询清空无处理：App组件仅在查询词非空时触发搜索，清空查询词时没有恢复原始列表的逻辑。

分步修复方案 #

方案一：组件层实时过滤（推荐） #

全局状态始终保留完整原始笔记，搜索过滤仅在组件渲染时处理，避免修改原始数据，逻辑最简洁：

修改App组件

const App = () => {
  const [query, setQuery] = useState("");
  // 获取全局完整笔记列表
  const allNotes = useNotesContext();
  
  // 用useMemo缓存过滤结果，避免重复计算
  const filteredNotes = useMemo(() => {
    if (!query) return allNotes;
    const lowerQuery = query.toLowerCase();
    return allNotes.filter(note => 
      note.title.toLowerCase().includes(lowerQuery)
    );
  }, [query, allNotes]);

  // 移除原有的useEffect搜索逻辑
  return (
    <div className="container">
      <header>
        <Title title={"Notes"} className={"app_title"} />
        <form className="search_container">
          <span class="material-symbols-outlined">search</span>
          <input
            type="search"
            placeholder="search notes"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
        </form>
      </header>
      {/* 渲染过滤后的列表 */}
      <NotesList notes={filteredNotes} />
    </div>
  );
};

方案二：通过Reducer管理过滤状态（需保留原始数据） #

若坚持用Reducer处理搜索，必须拆分状态结构，确保原始数据不被覆盖：

1. 修改状态结构与初始值

const getStoredNotes = (initialNotes = InitialNotes) => {
  const stored = JSON.parse(localStorage.getItem("storedNotes")) || initialNotes;
  // 状态拆分为原始数据和过滤后数据
  return {
    original: stored,
    filtered: stored
  };
};

2. 修正Reducer逻辑

const NotesReducer = (state, action) => {
  switch(action.type) {
    case "searchNotes": {
      const lowerQuery = action.query.toLowerCase();
      const filtered = state.original.filter(note => 
        note.title.toLowerCase().includes(lowerQuery)
      );
      return { ...state, filtered };
    }
    case "resetSearch": {
      // 清空查询时恢复原始列表
      return { ...state, filtered: state.original };
    }
    // 其他操作（如新增/删除笔记）需同步更新original和filtered
    case "addNote": {
      const newOriginal = [...state.original, action.note];
      return { ...state, original: newOriginal, filtered: newOriginal };
    }
    default:
      return state;
  }
};

3. 修改App组件的查询逻辑

const App = () => {
  const [query, setQuery] = useState("");
  const dispatch = useNotesDispatchContext();
  const { filtered } = useNotesContext();

  useEffect(() => {
    if (query) {
      dispatch({ type: "searchNotes", query });
    } else {
      dispatch({ type: "resetSearch" });
    }
  }, [query, dispatch]);

  return (
    <div className="container">
      {/* 原有渲染代码 */}
      {/* 渲染filtered列表 */}
    </div>
  );
};

4. 修复localStorage写入逻辑

仅存储原始数据，过滤结果无需持久化：

export const NotesProvider = ({ children }) => {
  const [state, dispatch] = useReducer(NotesReducer, getStoredNotes());
  useEffect(() => {
    localStorage.setItem("storedNotes", JSON.stringify(state.original));
  }, [state.original]);

  return (
    <NotesContext.Provider value={state}>
      <NotesDispatchContext.Provider value={dispatch}>
        {children}
      </NotesDispatchContext.Provider>
    </NotesContext.Provider>
  );
};

总结 #

优先选择组件层实时过滤的方案，无需修改全局状态结构，避免破坏原始数据，逻辑清晰且无额外状态管理成本。若使用Reducer方案，必须保证原始数据的独立性，同时处理查询清空的重置逻辑。

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