React按钮多选组件样式异常问题求助

你的代码存在两个核心问题，导致选中全部按钮后再取消单个时出现样式错误：

1. 直接修改React State数组（违反不可变性原则） #

在handleButton函数中，你直接引用并修改了原state数组：

let tmp = value;
tmp.push(button);
setValue(tmp);

这里tmp是原state数组的引用，修改它等同于直接修改原state，React无法检测到状态变化，会导致状态更新不及时、样式匹配异常。

修复方式：创建新数组来更新state，始终保持state不可变：

// 添加元素时生成新数组
setValue([...value, button]);
// 移除元素时同样返回新数组
setValue(value.filter((el) => el !== button));

2. 不必要地将JSX元素存储在State中 #

你把渲染好的按钮JSX存入listButtons state，再通过useEffect触发更新，这种写法冗余且容易引发状态不同步。React中JSX应直接在渲染阶段生成，无需额外存入state。

修复方式：删除listButtons state及对应的useEffect，直接在return中渲染按钮列表。

完整修正代码 #

import { useState } from 'react';

export default function App() {
  const [selectedIds, setSelectedIds] = useState([]);

  const BUTTONS = [
    { id: 123, title: 'button1' },
    { id: 456, title: 'button2' },
    { id: 789, title: 'button3' },
  ];

  const handleButtonClick = (buttonId) => {
    // 使用函数式更新，确保基于最新state操作
    setSelectedIds(prevState => {
      if (prevState.includes(buttonId)) {
        return prevState.filter(id => id !== buttonId);
      } else {
        return [...prevState, buttonId];
      }
    });
  };

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <div>
        {BUTTONS.map(bt => (
          <button
            key={bt.id}
            onClick={() => handleButtonClick(bt.id)}
            className={selectedIds.includes(bt.id) ? 'buttonPressed' : 'button'}
          >
            {bt.title}
          </button>
        ))}
      </div>
    </div>
  );
}

额外优化：

• 将value重命名为selectedIds，变量名更具语义化
• 使用函数式更新setSelectedIds(prevState => ...)，避免闭包导致的状态过期问题

修改后，按钮的选中状态与样式会完全同步，不会再出现异常。

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