在TypeScript中使用map渲染按钮时，如何实现单个按钮点击仅自身生效？

问题根源 #

你用了一个全局的布尔状态clicked，所有通过map渲染的按钮都依赖这个状态判断图标。只要这个状态更新，所有按钮的图标都会一起切换，自然达不到单个按钮独立切换的效果。

解决方案 #

方案1：用选中项的唯一标识存储状态 #

把单一布尔状态改成存储选中项的唯一标识（比如_id，避免文本重复导致的错误），每个按钮根据自身标识和状态值是否匹配来切换图标：

// 替换原有的clicked状态
const [selectedButtonId, setSelectedButtonId] = useState(null);

// 修改Button组件
<Button
  startIcon={
    // 判断当前按钮的_id是否等于选中的id，决定显示哪个图标
    selectedButtonId === key._id ? <RadioButtonCheckedIcon /> : <RadioButtonUncheckedIcon />
  }
  sx={{ textAlign: "left" }}
  key={key._id}
  className={`answer-button ${selectedAnswer === key.text ? "selected" : ""}`}
  onClick={() => {
    handleAnswerClick(key.text);
    // 切换选中状态：如果当前按钮已选中就取消，否则选中
    setSelectedButtonId(prev => prev === key._id ? null : key._id);
  }}
>
  {key.text}
</Button>

方案2：复用已有的selectedAnswer状态 #

看你的代码里已经有selectedAnswer状态，并且用它来判断按钮的选中样式。可以直接复用这个状态来控制图标，不用额外加clicked状态：

<Button
  startIcon={
    // 直接用已有的selectedAnswer判断，和选中样式逻辑保持一致
    selectedAnswer === key.text ? <RadioButtonCheckedIcon /> : <RadioButtonUncheckedIcon />
  }
  sx={{ textAlign: "left" }}
  key={key._id}
  className={`answer-button ${selectedAnswer === key.text ? "selected" : ""}`}
  onClick={() => {
    handleAnswerClick(key.text);
    // 这里只要handleAnswerClick内部正确更新了selectedAnswer，图标就会自动切换
  }}
>
  {key.text}
</Button>

为什么之前的方法无效 #

不管把setClicked放在哪里，只要是单个布尔状态，所有按钮都会共享这个状态值。状态更新时，所有按钮的图标判断条件都会触发，导致全部图标一起变化。而用选中项的标识或已有的selectedAnswer，每个按钮只会根据自身的属性判断，实现独立切换。

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