React图片库按语言搜索报错及无结果提示需求解决

错误原因 #

• filterData函数中，当搜索查询为空（!query）时未返回原始数据，导致filteredData为undefined，调用map时触发Cannot read properties of undefined (reading 'map')错误。
• Languages组件未导入useState钩子，会引发额外运行时错误。
• 搜索匹配逻辑未统一大小写，可能导致匹配失效（比如输入css无法匹配alt为CSS的项）。

修复后的代码 #

Languages.jsx #

import { useState } from 'react'; // 新增导入useState
import { languages } from "../../../database/languages";
import { Searchbar } from "../components/Searchbar";
import { Grid, Card, Typography, CardMedia } from '@mui/material';

const filterData = (query, data) => {
  if (!query) return data; // 修复：添加return返回原始数据
  // 修复：将query转为小写，实现大小写不敏感搜索
  const lowerQuery = query.toLowerCase();
  return data.filter((d) => d.alt.toLowerCase().includes(lowerQuery));
};

export const Languages = () => {
  const [searchQuery, setSearchQuery] = useState("");
  const filteredData = filterData(searchQuery, languages);

  return (
    <>
      <Searchbar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
      {filteredData.length > 0 ? (
        filteredData.map((language) => (
          <Grid key={language.id} item xs={12} sm={6} md={6} lg={3} xl={3}>
            <Card elevation={0} xs={12}>
              <Typography color="text.secondary" variant="p">
                {language.alt}
              </Typography>
              <CardMedia
                sx={{ height: 250, width: "100%" }}
                component="img"
                image={language.image}
                alt={language.alt}
              />
            </Card>
          </Grid>
        ))
      ) : (
        <Typography variant="h6" textAlign="center" marginTop={4}>
          未找到匹配的语言，请尝试其他关键词
        </Typography>
      )}
    </>
  );
};

Searchbar.jsx（优化版本） #

import { TextField, IconButton } from '@mui/material';
import { Search } from '@mui/icons-material';

export const Searchbar = ({ searchQuery, setSearchQuery }) => {
  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认提交行为，避免页面刷新
  };

  return (
    <form onSubmit={handleSubmit}>
      <TextField
        value={searchQuery} // 绑定value，确保受控组件状态一致
        onInput={(e) => {
          setSearchQuery(e.target.value);
        }}
        label="Type a language"
        placeholder="type here.."
        size="small"
      />
      <IconButton type="submit" aria-label="search">
        <Search />
      </IconButton>
    </form>
  );
};

languages.jsx（无需修改） #

export const languages = [
  {
    id: "1",
    image: "boostraplogo.svg",
    alt: "BOOSTRAP",
    language: "boostrap",
  },
  {
    id: "2",
    image: "csslogo.svg",
    alt: "CSS",
    language: "css",
  },
  {
    id: "3",
    image: "htmlogo.svg",
    alt: "HTML",
    language: "html",
  },
];

关键优化说明 #

1. 修复filterData的返回逻辑，确保无论查询是否为空，都返回数组类型数据。
2. 实现大小写不敏感搜索，提升用户搜索体验。
3. 添加无匹配结果时的提示文本，明确反馈搜索状态。
4. 将Searchbar改为受控组件，并阻止表单默认提交行为，避免不必要的页面刷新。

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