React中如何更新点击元素的isSelected状态？

你现在的handleSelect函数逻辑出错的原因很明显：在map里写的val.isSelected = index === true完全不符合需求——index是数字，和true比较永远是false，而且没有针对传入的i（点击项的索引）做判断，同时还直接修改了原state里的对象（违反React状态不可变的原则），这才导致所有项的状态都没正确更新，甚至可能出现意外的批量修改。

下面分两种场景给你正确的实现：

场景1：单选（点击项设为true，其余为false） #

如果你的需求是点击某一项时，只有该项被选中，其他项取消选中，用这个版本：

handleSelect(i) {
  // 生成新的 genres 数组，不直接修改原state
  const updatedGenres = this.state.allGenres.map((val, index) => {
    // 返回新对象，复制原属性后覆盖isSelected
    return {
      ...val,
      isSelected: index === i
    };
  });
  this.setState({ allGenres: updatedGenres });
}

场景2：切换状态（点击项反转当前选中状态，其余不变） #

如果需求是点击项时，切换它自己的选中状态（原来true变false，原来false变true），其他项保持原样，用这个版本：

handleSelect(i) {
  const updatedGenres = this.state.allGenres.map((val, index) => {
    if (index === i) {
      // 切换目标项的isSelected状态
      return { ...val, isSelected: !val.isSelected };
    }
    // 非目标项直接返回原对象
    return val;
  });
  this.setState({ allGenres: updatedGenres });
}

关键注意点 #

• 永远不要直接修改this.state里的数组或对象，必须通过生成新的数组/对象来更新状态，这是React状态管理的核心原则（避免不可预测的状态变化）。
• 用map遍历数组时，针对目标索引的项单独处理状态，其余项保持原有状态或统一设为未选中，根据你的需求选择即可。

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