从图标字符串数组中过滤指定图标并重新渲染的问题

看起来你在处理React中移除数组里指定图标的逻辑时遇到了问题，我帮你梳理下代码里的问题并给出修正方案：

首先看你原代码里的几个关键问题：

1. filter回调没有返回值：你的filter函数里只是写了item !== icon但没有return，这会导致每个迭代都返回undefined，filter会把所有元素都过滤掉，最终newIconsArray是空的，这肯定不是你想要的。
2. 变量名冲突：你在外面定义了const item = icon，然后filter的参数又用了item，这会导致回调里的item覆盖外面的变量，容易混淆逻辑。
3. setState的写法不完整：你没写清楚要更新哪个状态字段，而且如果依赖当前状态/props的话，最好用函数式setState来确保拿到最新的状态。

另外你提到尝试用字符串化来匹配，其实完全没必要——你的数组里的元素本身就是字符串类型的emoji，直接用!==比较就可以精准匹配。

修正后的完整代码（移除所有匹配的图标） #

removeMatches(icon) {
  // 直接使用传入的icon，不需要额外赋值item
  const iconsArray = this.props.cardTypes;
  // 过滤掉所有和传入icon匹配的元素，箭头函数更简洁且明确返回判断结果
  const newIconsArray = iconsArray.filter(currentIcon => currentIcon !== icon);
  
  // 更新状态，假设你要更新的state字段是cardIcons（替换成你的实际字段名即可）
  // 用函数式setState更安全，确保拿到最新的props和状态值
  this.setState(prevState => ({
    ...prevState,
    cardIcons: newIconsArray
  }));
}

如果你的需求是只移除第一个匹配的图标（而不是所有） #

如果数组里有重复图标，你只想删掉第一个出现的那个，可以用findIndex找到索引后再移除：

removeMatches(icon) {
  // 先拷贝一份props里的数组，避免直接修改props（React中props是只读的）
  const iconsArray = [...this.props.cardTypes];
  // 找到第一个匹配图标的索引
  const matchIndex = iconsArray.findIndex(currentIcon => currentIcon === icon);
  
  // 只有找到匹配项时才执行移除和状态更新
  if (matchIndex !== -1) {
    iconsArray.splice(matchIndex, 1);
    this.setState(prevState => ({
      ...prevState,
      cardIcons: iconsArray
    }));
  }
}

关键要点总结 #

• filter函数的回调必须返回布尔值，以此决定当前元素是否保留在新数组中；
• 避免变量名冲突，尽量用语义化的变量名（比如currentIcon而不是重复的item）；
• React中不要直接修改props，需要更新状态时，基于props的拷贝来操作；
• 当新状态依赖于当前状态或props时，优先使用函数式setState（this.setState(prevState => {...})），避免状态更新的异步性导致的问题；
• Emoji本质就是字符串，直接用全等/不全等运算符比较即可，无需额外转字符串处理。

内容的提问来源于stack exchange，提问作者Kevin T.