React搜索栏筛选方形链接及useState类型错误求助

1. 重构数据结构（核心修复） #

你之前应该是把React元素（比如<div>这类JSX）直接存在originalData里传入useState，这既不符合React数据驱动的设计逻辑，也会引发类型错误。正确的做法是把卡片的纯业务数据（图片地址、文本内容、跳转链接）抽成数组，渲染时再基于数据生成JSX。

先定义数据类型（TypeScript环境下）：

interface CardItem {
  imgSrc: string;
  text: string;
  link: string;
}

然后编写原始数据数组：

const originalData: CardItem[] = [
  { imgSrc: "/image1.png", text: "包含关键词X的卡片内容", link: "/page1" },
  { imgSrc: "/image2.png", text: "包含关键词Y的卡片内容", link: "/page2" },
  // 剩余4个卡片按相同格式补充
];

2. 解决useState类型错误 #

之前出现的never[]错误，是因为你没有给useState指定明确的类型，TypeScript默认推断空数组为never[]（表示数组永远无法添加元素）。现在用上面定义的CardItem[]约束状态类型，或者直接基于原始数据实时过滤（无需把过滤后的元素存在state）。

完整实现代码：

import { useState } from "react";

interface CardItem {
  imgSrc: string;
  text: string;
  link: string;
}

const originalData: CardItem[] = [
  // 填入你的6个卡片数据
];

export default function SearchableCardPage() {
  // 存储输入框实时内容
  const [inputValue, setInputValue] = useState("");
  // 存储回车确认后的搜索关键词
  const [searchKeyword, setSearchKeyword] = useState("");

  // 回车触发搜索逻辑
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      setSearchKeyword(inputValue.trim().toLowerCase());
    }
  };

  // 过滤符合条件的卡片
  const filteredCards = originalData.filter(item => {
    if (!searchKeyword) return true; // 无关键词时显示全部
    return item.text.toLowerCase().includes(searchKeyword);
  });

  return (
    <div className="page-container">
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder="输入关键词后回车搜索"
      />
      <div className="card-grid">
        {filteredCards.map((item, index) => (
          <a key={index} href={item.link} className="card-item">
            <img src={item.imgSrc} alt={item.text} />
            <p>{item.text}</p>
          </a>
        ))}
      </div>
    </div>
  );
}

关键问题说明 #

• 为什么不能存React元素到state？state的职责是存储状态数据，而非UI元素。UI应该由数据驱动生成，这样既符合React的设计理念，也能避免不必要的重渲染和类型冲突。
• 类型错误的本质：当你初始化useState([])时，TypeScript无法推断数组元素类型，会默认设为never[]，导致后续无法传入元素。通过显式指定CardItem[]类型，就能解决这个问题。

简化优化（可选） #

如果不需要区分输入框的临时内容和确认后的搜索词，也可以直接用输入框内容作为过滤条件（回车后生效），去掉searchKeyword状态：

const [inputValue, setInputValue] = useState("");
let filteredCards = originalData;

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.key === "Enter") {
    const keyword = inputValue.trim().toLowerCase();
    filteredCards = originalData.filter(item => 
      item.text.toLowerCase().includes(keyword)
    );
  }
};

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