反应上下文“更新”无法正常工作

Question

I'm making custom tab component and I have issue on closing tab. Switching tab is working ok but when I close last tab I want to set active previouse tab and this is not working.

setTabs (context update) is updating array "data" in object but not "activeTab".

I'm using react Context to store list of tabs and active tab. Switching tabs is working correctly, opening new tab also works fine.

TabsContext

import React, { useReducer, useEffect } from "react";

const initialState = {
  data: [
    {
      name: "Start",
      component: "StartTab",
      cantClose: true,
      params: null
    }
  ],
  activeTab: 0
};

const localState = JSON.parse(localStorage.getItem("tabs"));
const TabsContext = React.createContext();

let reducer = (tabs, newTabs) => {
  if (newTabs === null) {
    localStorage.removeItem("tabs");
    return initialState;
  }
  return { ...tabs, ...newTabs };
};

function TabsProvider(props) {
  const [tabs, setTabs] = useReducer(reducer, localState || initialState);

  useEffect(() => {
    localStorage.setItem("tabs", JSON.stringify(tabs));
  }, [tabs]);

  return (
    <TabsContext.Provider value={{ tabs, setTabs }}>
      {props.children}
    </TabsContext.Provider>
  );
}

export { TabsContext, TabsProvider };

MainTabs Component:

import React, { Component, useContext } from "react";
import { TabsContext } from "../../providers/TabsProvider";
import StartTab from "./tab.start";
...

class TabComponent extends Component {
    components = {
        StartTab: StartTab,
        ...
    };

    render() {
        const TagName = this.components[this.props.tag];
        return <TagName />
    }
}

const TabsMain = () => {
    const { tabs, setTabs } = useContext(TabsContext);

    const closeTab = (index) => {
        tabs.data.splice(index, 1);

        if (tabs.activeTab == tabs.data.length ) {
            tabs.activeTab--;
        }

        setTabs({ data: tabs.data, activeTab: tabs.activeTab });
    };

    const tabsNavigation = tabs.data.map((tab, index) =>
        <li key={index}>
            <button
                onClick={() => {
                    setTabs({ data: tabs.data, activeTab: index });
                }}
                className={`${tabs.activeTab == index ? 'active' : ''}`}
            >
                {tab.name}
                <div onClick={() => {
                    closeTab(index);
                }} className={`close_button ${!tab.cantClose ? 'show' : 'hide'}`}>X</div>
            </button>
        </li>
    );

    const tabsPanels = tabs.data.map((tab, index) =>
        <div key={index} className={`panel ${tabs.activeTab == index ? 'active' : ''}`}>
            <TabComponent tag={tab.component} />
        </div>
    );

    return (
        <div className="tabs">
            <ul className="tabs__navigation">
                {tabsNavigation}
            </ul>
            <div className="tabs__content">
                {tabsPanels}
            </div>
        </div>
    );
};

export default TabsMain;

Navigation Component

import React, { Component, useContext } from "react";
import { TabsContext } from "../../providers/TabsProvider";

const Navigation = () => {
    const { tabs, setTabs } = useContext(TabsContext);

    const openTab = (newTab) => {
        tabs.data.push(newTab);
        setTabs(tabs);
    };

    return (
        <ul className="navigation">
            <li>
               <button onClick={() => { openTab({ name: "Start", component: "StartTab" }); }}>
                  Start
               </button>
            </li>
        </ul>
    );
};

export default Navigation;

Answer 1

I found the solution. First of all I have double click action: 1) on click on tab - selectTab, 2) on "X" on same button, when i clicked X then selectTab and closeTab are fired (setTabs was fired also two times)

The solution Was to extract "X" from button - from this:

            <button
                onClick={() => {
                    setTabs({ data: tabs.data, activeTab: index });
                }}
                className={`${tabs.activeTab == index ? 'active' : ''}`}
            >
                {tab.name}
            <div onClick={() => {
                closeTab(index);
            }} className={`close_button ${!tab.cantClose ? 'show' : 'hide'}`}>X</div>
            </button>

to this:

            <button
                onClick={() => {
                    setTabs({ data: tabs.data, activeTab: index });
                }}
                className={`${tabs.activeTab == index ? 'active' : ''}`}
            >
                {tab.name}
            </button>
            <div onClick={() => {
                closeTab(index);
            }} className={`close_button ${!tab.cantClose ? 'show' : 'hide'}`}>X</div>

and change closeTab function to this:

    const closeTab = (index) => {
        tabs.data.splice(index, 1);
        setTabs({ data: tabs.data, activeTab: index-1 });
    };