React中useState更新className激活tab对应CSS样式异常问题

两种错误写法的根因分析 #

• 第一种写法问题：
  useState的状态更新是异步批处理机制，调用setBtnState时不会同步修改当前渲染闭包内的btnState值，你在set语句后立刻打印，拿到的还是上一次渲染留存的旧状态，所以打印的activeTabId和传入的id不匹配。但你传给setBtnState的新值{activeTabId:id}是符合不可变要求的新对象，React下一次重渲染时会正确读取新状态，所以样式逻辑大部分场景能正常生效，仅控制台打印结果不符合预期。

对应错误代码：

const [btnState, setBtnState] = useState({activeTabId: 0});
const onClick = (id:number) => {
    setBtnState({activeTabId:id})       
    console.log(btnState.activeTabId, id); // 此处读取的是闭包旧值
};

• 第二种写法问题：
  这种写法直接修改了原state对象的属性，违反了React状态的不可变原则。React判断状态是否更新靠的是浅对比引用地址，你把修改后的原对象引用传回setBtnState，React检测到引用没有变化，会跳过/延迟重渲染，导致渲染时读取的状态和你手动修改的值不同步，出现激活样式永远落后一次点击、错位的问题。你直接修改原对象后打印当然能拿到新值，但React没有正常感知状态变化，重渲染时机完全错乱，所以样式表现异常。

对应错误代码：

const [btnState, setBtnState] = useState({activeTabId: 0});
const onClick = (id:number) => {
    btnState.activeTabId = id // 直接修改原state，破坏不可变性
    setBtnState(btnState) // 传入的还是原对象引用，React无法识别更新      
    console.log(btnState.activeTabId, id);
};

正确实现方案 #

核心规则：

1. 更新引用类型状态（对象/数组）时，必须创建新的引用传入set方法，禁止直接修改原状态
2. 不要在set方法调用后同步读取状态，当前渲染周期内的状态值是固定的，最新状态会在下一次重渲染时生效

核心代码修正 #

首先可以简化状态定义，直接存储激活tab的索引即可，无需额外包裹对象：

// 直接存激活索引，简化逻辑
const [activeTabId, setActiveTabId] = useState(0);

const updateActiveId = (id:number) => {
    // 直接传入新值即可，基础类型不存在引用问题
    setActiveTabId(id);
};

// 如果需要打印状态变化，用useEffect监听，不要在updateActiveId里直接打log
useEffect(() => {
  console.log('当前激活tab：', activeTabId);
}, [activeTabId])

然后修正渲染部分的代码，注意修复原代码里的HTML结构问题（ul的直接子元素必须是li，不能放span），同时给关闭按钮加事件冒泡阻止，避免点关闭时触发tab选中：

<ul className="all-tabs">
  {tab.map((tabItem, index) => (
    <li 
      key={index} 
      onClick={() => updateActiveId(index)} 
      // 直接在渲染时读取最新状态拼接类名
      className={`individual-tab-container ${index === activeTabId ? 'tab-selected' : ''}`}
    > 
      <span className="dynamic-tab-container">
        <span className="title-close-save-button-container">
          <input 
            className="title-of-tab" 
            name="title"
            type="text"
            required
            placeholder="Click to rename tab here" 
            size={20}
            maxLength={20}
            value = {tabItem.title}
            onChange={(e) => handleTabChange(e, index)}
          />    
          <div className="save-close-btn-container">
            <div className="save-button-container">
              <button id="save">save</button>
            </div>
            <div className="close-btn-container"> 
              <button 
                type="button" 
                className="close-btn" 
                onClick={(e) => {
                  // 阻止冒泡，避免触发li的选中逻辑
                  e.stopPropagation();
                  deleteTab(index);
                  // 删除tab后如果当前激活tab超出范围，自动修正激活id
                  if(index <= activeTabId && activeTabId > 0) {
                    setActiveTabId(activeTabId - 1);
                  }
                }}
              >
                <span className="close-btn-txt">&times;</span>
              </button>   
            </div> 
          </div>  
        </span>
      </span>
    </li>   
  ))}
</ul>

额外样式修复 #

原CSS代码里.title-close-save-button-container样式块多了一个多余的*/注释符，会导致后续样式解析异常，直接删除即可：

.title-close-save-button-container{
    display: flex;
    margin-top:6.5%;
    flex-flow: row;
    /* 删掉此处多余的错误注释符 */
}

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