React开发宝可梦筛选功能时多条件任意顺序过滤数组问题咨询

你现在的逻辑每次都是从原始的宝可梦数组pokeListCopy执行过滤，所以每次筛选都会覆盖上一次的结果，自然无法叠加条件。要实现多条件叠加，核心原则是原始数据永远保持不变，只单独维护激活的筛选条件，最终展示的列表由原始数据+所有激活条件实时计算得到。

修改后的完整代码如下：

import React, { useState, useMemo } from "react";
import "./App.css";
import PokemonLibrary from "./data/PokemonList.json";

// 原始数据固定不变，不需要存入state
const RAW_POKEMON_LIST = PokemonLibrary.pokemon;

export default function App() {
  // 存储当前激活的筛选条件，后续新增筛选维度直接加属性即可
  const [filters, setFilters] = useState({
    type: null,
    weakness: null
  });

  // 实时计算过滤后的列表，只要filters变化就会自动重新计算
  const filteredPokemon = useMemo(() => {
    let result = [...RAW_POKEMON_LIST];
    // 应用属性筛选
    if (filters.type) {
      result = result.filter(poke => poke.type.includes(filters.type));
    }
    // 应用弱点筛选
    if (filters.weakness) {
      result = result.filter(poke => poke.weaknesses.includes(filters.weakness));
    }
    return result;
  }, [filters]);

  // 修改属性筛选逻辑：仅更新筛选条件，不直接操作列表
  const filterTypeOne = () => {
    setFilters(prev => ({
      ...prev,
      type: "Grass"
    }));
  };

  // 修改弱点筛选逻辑：仅更新筛选条件
  const filterWeakness = () => {
    setFilters(prev => ({
      ...prev,
      weakness: "Ice"
    }));
  };

  // 可选：新增重置筛选的功能
  const resetFilters = () => {
    setFilters({ type: null, weakness: null });
  };

  return (
    <div className="App">
      <h1>Pokemon Selector!</h1>
      <div>
        <button onClick={filterTypeOne}>Filter Grass</button>
        <button onClick={filterWeakness}>Weak to Ice</button>
        <button onClick={resetFilters}>Reset All Filters</button>
      </div>
      {filteredPokemon.map((poke) => (
        <p key={poke.id}>
          #{poke.num} | {poke.name} | {poke.type[0]} {poke.type[1] || ""}
          <img src={poke.img} alt={`${poke.name}的图片`}></img>
        </p>
      ))}
    </div>
  );
}

• 原始宝可梦数据作为常量单独保存，全程不会被修改，保证所有筛选的基准一致
• 所有筛选操作只会修改filters状态里对应的条件值，不会直接修改展示的列表
• 最终展示的列表filteredPokemon通过useMemo计算得到，会自动应用所有已激活的筛选条件，不管点击顺序如何，所有条件都会生效
• 后续如果要新增其他筛选维度（比如种族值、编号范围等），只需要在filters状态里加对应属性，然后在useMemo的计算逻辑里加对应的过滤规则即可，扩展性很强

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