React TypeScript中如何将搜索输入以数组形式存入localStorage

你当前代码的核心问题是每次仅存储单个字符串而非数组，且未正确处理localStorage读取后的类型断言，导致TypeScript类型不兼容。以下是分步修正方案：

1. 重构存储逻辑：将搜索值追加到数组 #

修改Searchbar组件的handleClick函数，每次搜索时先读取已有的历史数组，再将新搜索值加入后存回：

const handleClick = () => {
  const inputValue = inputRef.current?.value.trim();
  if (!inputValue) return; // 过滤空搜索词

  setSearch(inputValue);

  // 读取现有历史，默认空数组
  const existingHistory = localStorage.getItem("searchHistory");
  const searchHistory: string[] = existingHistory ? JSON.parse(existingHistory) as string[] : [];

  // 可选：避免重复存储相同搜索词
  if (!searchHistory.includes(inputValue)) {
    searchHistory.push(inputValue);
    localStorage.setItem("searchHistory", JSON.stringify(searchHistory));
  }
};

2. 解决TypeScript类型问题 #

JSON.parse默认返回any类型，必须通过as string[]断言为字符串数组，让TypeScript识别数组类型，消除类型不兼容报错。

3. 优化useEffect逻辑（可选） #

如果需要在组件加载时读取历史记录（比如展示历史搜索列表），可以调整useEffect：

useEffect(() => {
  const existingHistory = localStorage.getItem("searchHistory");
  if (existingHistory) {
    const history = JSON.parse(existingHistory) as string[];
    // 可在此处更新历史列表状态，用于页面展示
    console.log("已存储的搜索历史:", history);
  }
}, []); // 仅组件挂载时执行一次

完整修改后的Searchbar组件 #

import { useRef, KeyboardEvent, useEffect } from "react";

type SearchProps = {
  setSearch: React.Dispatch<React.SetStateAction<string>>;
};

export const Searchbar = ({ setSearch }: SearchProps) => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    const inputValue = inputRef.current?.value.trim();
    if (!inputValue) return;

    setSearch(inputValue);

    // 读取并更新搜索历史数组
    const existingHistory = localStorage.getItem("searchHistory");
    const searchHistory: string[] = existingHistory ? JSON.parse(existingHistory) as string[] : [];
    
    if (!searchHistory.includes(inputValue)) {
      searchHistory.push(inputValue);
      localStorage.setItem("searchHistory", JSON.stringify(searchHistory));
    }
  };

  const log = (e: KeyboardEvent): void => {
    if (e.key === "Enter") handleClick();
  };

  useEffect(() => {
    // 组件加载时读取历史示例
    const existingHistory = localStorage.getItem("searchHistory");
    if (existingHistory) {
      const history = JSON.parse(existingHistory) as string[];
      console.log("已存储的搜索历史:", history);
    }
  }, []);

  return (
    <div>
      <input
        type="text"
        autoComplete="off"
        ref={inputRef}
        placeholder="search game..."
        onKeyDown={log}
      />
      <button onClick={handleClick}>SEARCH</button>
    </div>
  );
};

关键说明 #

• 将存储键名从form改为searchHistory，更符合语义；
• 增加空值过滤，避免存储无效的空字符串；
• 可选的去重逻辑，可根据业务需求移除；
• 通过类型断言确保数组操作的类型安全，解决TypeScript类型报错问题。

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