关闭单个标签页时所有已打开标签页均被关闭的问题排查求助

问题根因 #

代码的核心错误是操作对象错误：prevState是包含panes、activeKey两个属性的状态对象，原逻辑直接对整个状态对象做展开、forEach遍历、filter过滤操作，对象本身不支持数组的遍历/过滤方法，导致最终返回的panes为空数组，所有标签页就都被清空了。

修正后的实现代码 #

remove = targetKey => {
  let { activeKey } = this.state;
  let lastIndex;
  this.setState(prevState => { 
      // 正确从prevState中取出panes数组进行操作
      const originPanes = [...prevState.panes];
      originPanes.forEach((pane, i) => {
          if (pane.key === targetKey) {
            lastIndex = i - 1;
          }
      });
      const newPanes = originPanes.filter(pane => pane.key !== targetKey);
      if (newPanes.length && activeKey === targetKey) {
          if (lastIndex >= 0) {
            activeKey = newPanes[lastIndex].key;
          } else {
            activeKey = newPanes[0].key;
          }
      }
      return ({panes: newPanes, activeKey});
  });  
};

注意事项 #

• 操作状态时要明确区分状态根对象和需要修改的数组属性，不要直接对整个状态对象调用数组方法
• 数组修改时要做浅拷贝，避免直接修改原状态导致的不可预期问题

内容的提问来源于stack exchange，提问作者Thomas Deepak Konreddy