React中点击按钮结合搜索条件筛选JSON服务端英雄数据的实现问题

需要修改Home组件的3处核心逻辑，具体修改如下：

• 给useEffect依赖数组新增type状态，确保切换筛选类型时能重新触发数据筛选
• 优化filter筛选逻辑，同时兼容英雄类型筛选和关键词搜索两个条件
• 修正无结果的判断逻辑，原代码content >= 0无法正常识别空数据场景

修改后的完整Home组件代码 #

// 导入Navbar组件
import NavBar from "./NavBar";
import { useState, useEffect } from "react";
import { Container, Row, Col, Card } from "react-bootstrap"; // 用到的Bootstrap组件可根据实际情况自行调整

const Home = () => {
  // 存储需要展示的内容
  const [content, setContent] = useState(null);
  // 存储Navbar传递的搜索值
  const [searchValue, setSearchValue] = useState("");
  // 存储按钮传递的筛选类型
  const [type, setType] = useState("Flying");

  useEffect(() => {
    // 获取JSON数据
    const getData = async () => {
      const response = await db.get("data");

      let data = response.data.filter((val) => {
        // 匹配英雄类型筛选条件
        const matchType = type === 'All' 
          ? true 
          : type === 'Flying' 
            ? val.puedeVolar 
            : !val.puedeVolar;
        // 匹配搜索关键词条件
        const matchSearch = searchValue === "" 
          ? true 
          : val.nombre.toLowerCase().includes(searchValue.toLowerCase());
        return matchType && matchSearch;
      });

      // 无匹配数据时直接设置无结果提示
      if (data.length === 0) {
        setContent(<p>No results</p>);
        return;
      }

      // 根据元素数量生成对应的Bootstrap行
      const rows = [...Array(Math.ceil(data.length / 3))];
      const imagesRows = rows.map((row, rowIdx) => (
        <Row className="g-4 mb-4" key={rowIdx}>
          {data.slice(rowIdx * 3, rowIdx * 3 + 3).map(hero => (
            <Col md={4} key={hero.id}>
              <Card>
                <Card.Img variant="top" src={hero.avatarURL} alt={hero.nombre} />
                <Card.Body>
                  <Card.Title>{hero.nombre}</Card.Title>
                  <Card.Text>真名：{hero.nombreReal}</Card.Text>
                  <Card.Text>是否可飞行：{hero.puedeVolar ? '是' : '否'}</Card.Text>
                </Card.Body>
              </Card>
            </Col>
          ))}
        </Row>
      ));
      // 将处理后的数据存入content状态
      setContent(imagesRows);
    }
    getData();
  }, [searchValue, type]); // 新增type为依赖项，切换类型时自动重新筛选

  return (
    <>
      <NavBar setSearchValue={setSearchValue} setType={setType} />
      {/* 展示内容 */}
      <Container className="mt-4">{content}</Container>
    </>
  );
};

逻辑说明 #

• 类型筛选和搜索筛选是叠加生效的：比如先选了Flying类型，再输入关键词搜索，只会匹配可飞行的英雄中名称符合关键词的结果
• 类型判断逻辑完全匹配需求：All返回所有英雄，Flying返回puedeVolar: true的英雄，Flightless返回puedeVolar: false的英雄
• 不需要修改原有NavBar组件的逻辑，现有点击事件和输入框逻辑可直接复用

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