React过滤后Item消失问题求助（附代码示例）

核心问题 #

你的过滤逻辑存在逻辑错误，导致切换到非"All"分类时没有任何条目匹配，最终页面卡片全部消失。

错误分析 #

1. 不合理的同时匹配条件：原逻辑中(card.genre.includes(CurrentMovieCard) && card.cinema.includes(CurrentMovieCard))要求卡片的genre和cinema同时匹配目标分类，这几乎不会有符合的条目——因为你的分类按钮值（比如"Action"、"AMC"）只会对应其中一个字段的分类。
2. 字符串匹配逻辑错误：对字符串类型的genre/cinema使用includes会导致子字符串匹配（比如genre="Action"时，CurrentMovieCard="Act"也会被匹配），但你需要的是精确匹配。
3. 未统一处理字段类型：部分条目的genre/cinema是字符串，部分是数组，原逻辑只覆盖了部分场景，导致部分符合条件的条目被遗漏。

修复方案 #

1. 添加分类匹配辅助函数

先写一个统一处理字符串和数组类型字段的匹配函数：

const matchesCategory = (field, category) => {
  if (Array.isArray(field)) {
    return field.includes(category);
  }
  // 字符串类型执行精确匹配
  return field === category;
};

2. 修正过滤逻辑

替换原useEffect中的过滤代码：

React.useEffect(() => {
  if (CurrentMovieCard === "All") {
    setMovieItem(data);
  } else {
    const filtered = data.filter((card) => {
      // 只要genre或cinema任意一个匹配目标分类即可
      return matchesCategory(card.genre, CurrentMovieCard) || matchesCategory(card.cinema, CurrentMovieCard);
    });
    setMovieItem(filtered);
  }
}, [CurrentMovieCard]);

3. 额外校验（可选）

确保按钮的value属性确实是你期望的分类值，避免因取值错误导致的无匹配情况：

const handleBtns = (e) => {
  const word = e.target.value?.trim();
  if (word) {
    setCurrentMovieCard(word);
  }
};

修复说明 #

修复后的逻辑会统一处理字符串和数组类型的genre/cinema字段，只要其中一个字段精确匹配目标分类就会保留该卡片，彻底解决了原逻辑中苛刻的同时匹配条件和类型不一致导致的匹配问题。

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