React中useState状态在关闭Tab场景下未更新的问题

问题背景 #

我翻了StackOverflow上一堆类似问答，还是搞不定自己遇到的情况。我清楚React状态更新是异步的，且没有做任何DOM操作。

我实现了一个Tab渲染功能：新Tab初始展示固定数据库表名列表，选中表名后会替换为对应表内容。现在的问题是，关闭已打开的Tab时，currentTab状态并未更新到目标Tab，导致Tab详情区域空白，必须手动点击其他Tab才会显示内容。比如关闭第三个Tab后，预期自动切换到第二个Tab，但实际并未生效。

相关代码 #

移除Tab的函数 #

function removeTab(id) {
  const ntl = tabsList;
  const idx = ntl.findIndex((v) => v.id === id);
  if (idx !== -1) {
    ntl.splice(idx, 1);
    if (ntl.length) {
      let t = ntl[idx];
      console.log("------", t, idx);
      if (!t) {
        t = ntl[0];
      }
      console.log("++++++1", t, t.id);
      setCurrentTab(t.id);
      setTabsList([...ntl]);
    } else {
      const t = newTab();
      console.log("++++++2", t, t.id);
      setCurrentTab(t.id);
      setTabsList([t]);
    }
  }
}

监听currentTab的Effect #

useEffect(() => { console.log('------------>', currentTab) }, [currentTab]);

JSX中调用removeTab的部分 #

{tabsList.map((t) => (
          <a
            key={t.id + ""}
            className={
              "tab tab-bordered " + (currentTab === t.id ? "tab-active" : "")
            }
            onClick={() => {
              setCurrentTab(t.id);
            }}
          >
            {t.name}
            <button
              onClick={() => {
                removeTab(t.id); // 点击X按钮关闭Tab
              }}
            >
              X
            </button>
          </a>
        ))}

问题分析 #

核心问题有两个：

1. 直接修改React状态数组：const ntl = tabsList;是把状态数组的引用直接赋值给ntl，后续的ntl.splice(idx, 1)直接修改了原状态数组，违反了React状态不可变的原则。React依赖状态的引用变化触发重渲染，直接修改原状态会导致状态更新逻辑异常，进而干扰setCurrentTab的同步执行。
2. 事件冒泡干扰：按钮的点击事件会冒泡到父元素<a>标签，触发父元素的setCurrentTab(t.id)，导致刚设置的currentTab被覆盖。

解决方案 #

1. 修复状态不可变问题 #

修改removeTab函数，先创建原数组的副本再操作，确保不直接修改原状态：

function removeTab(id) {
  // 先创建原数组的副本，避免直接修改状态
  const ntl = [...tabsList];
  const idx = ntl.findIndex((v) => v.id === id);
  if (idx !== -1) {
    ntl.splice(idx, 1);
    if (ntl.length) {
      // 仅当删除的是当前选中的Tab时，才切换目标Tab
      let targetTabId = currentTab;
      if (currentTab === id) {
        // 删除的是最后一个元素时，取倒数第一个；否则取当前索引的元素
        targetTabId = ntl[idx] ? ntl[idx].id : ntl[ntl.length - 1].id;
      }
      setCurrentTab(targetTabId);
      setTabsList(ntl);
    } else {
      const t = newTab();
      setCurrentTab(t.id);
      setTabsList([t]);
    }
  }
}

2. 阻止事件冒泡 #

修改JSX中的按钮点击逻辑，阻止事件冒泡到父元素：

<button
  onClick={(e) => {
    e.stopPropagation(); // 阻止事件冒泡，避免触发父元素的onClick
    removeTab(t.id);
  }}
>
  X
</button>

关键说明 #

• 状态不可变：永远不要直接修改React状态对象或数组，必须通过创建副本修改后再调用setState更新，这是React状态管理的核心原则，否则会导致组件不重渲染、状态更新异常等问题。
• 事件冒泡处理：嵌套元素的点击事件会向上冒泡，若父元素有同名事件，会覆盖当前操作的结果，必须针对性阻止。
• 严谨的Tab切换逻辑：仅在删除当前选中的Tab时才切换目标Tab，避免不必要的状态更新。

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