React中如何在map函数内更新状态？实现多选按钮状态切换

我来帮你解决这个多选按钮的状态切换问题——核心是要精准定位点击的按钮，在state更新时只修改对应项的selected值，同时保持其他按钮的状态不变。下面是完整的实现方案，以React函数组件为例：

1. 初始化按钮状态 #

首先用useState定义按钮数组，每个元素包含name、id和selected标识：

import { useState } from 'react';

function InterestSelector() {
  // 初始化4个兴趣按钮的状态
  const [buttons, setButtons] = useState([
    { name: '户外探险', id: 1, selected: false },
    { name: '读书写作', id: 2, selected: false },
    { name: '美食烹饪', id: 3, selected: false },
    { name: '影视追剧', id: 4, selected: false },
  ]);

2. 编写点击事件处理函数 #

关键是利用函数式更新（setButtons接收一个函数），遍历原按钮数组，只对点击的按钮切换selected状态：

const handleButtonClick = (buttonId) => {
    setButtons(prevButtons => {
      return prevButtons.map(btn => {
        // 匹配到点击的按钮ID，切换它的selected状态
        if (btn.id === buttonId) {
          return { ...btn, selected: !btn.selected };
        }
        // 其他按钮保持原状态不变
        return btn;
      });
    });
  };

3. 渲染按钮组件 #

遍历按钮数组，根据selected状态给按钮添加高亮样式，同时绑定点击事件：

return (
    <div className="interest-container">
      {buttons.map(btn => (
        <button
          key={btn.id} // 必须用唯一ID作为key，避免渲染异常
          className={`interest-btn ${btn.selected ? 'selected' : ''}`}
          onClick={() => handleButtonClick(btn.id)}
        >
          {btn.name}
        </button>
      ))}
    </div>
  );
}

export default InterestSelector;

4. 添加样式（可选但推荐） #

给选中的按钮添加视觉区分，让用户清楚看到选择状态：

.interest-container {
  padding: 16px;
}

.interest-btn {
  padding: 10px 20px;
  margin: 0 10px 10px 0;
  border: 2px solid #e0e0e0;
  border-radius: 20px;
  background-color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.interest-btn.selected {
  border-color: #4CAF50;
  background-color: #E8F5E9;
  color: #2E7D32;
}

关键知识点说明 #

• 不可变更新：React要求state更新必须是不可变的，所以我们不能直接修改prevButtons里的元素，而是通过map返回一个新数组，只修改目标按钮的属性。
• 函数式更新：使用setButtons(prev => ...)确保我们总是基于最新的state进行修改，避免因为state异步更新导致的错误。
• 唯一key：用按钮的id作为key，保证React能正确识别每个按钮，避免渲染时出现重复或丢失状态的问题。

这样实现后，点击任意按钮都会独立切换它的选中状态，完全支持多选和取消选择，正好符合你的兴趣选择场景需求。

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