I am using AntDesign for tab in my UI. When i am reloading my page tab automatically change, i have implement some common solutions but still not working. this problem ruins my ui

code :

const [key, setKey] = useState("1");
const callback = (k) => {
    setKey(k);
    
}

const { projectId } = useParams();

return (
    <MainLayout
        component={
            <div className="flex-container">
                <Tabs defaultActiveKey={key} onChange={callback} className="flex-child" transition={false}>
                    <TabPane tab="Project Overview" key={1}>
                        <SingleProject {...props} />
                    </TabPane>
                  
                    <TabPane tab="Models" key={2}>
                        <div>
                            <a href="#">
                            <Model {...props}/>
                            </a>
                        </div>
                    </TabPane>
                    <TabPane tab="360 Tour" key={3}>
                        <div>
                        <Assests {...props}/>
                        </div>
                    </TabPane>
                    <TabPane tab="Documents" key={4}>
                        <div>
                            
                            <Document {...props}/>
                        </div>
                    </TabPane>
                    <TabPane tab="M.I.R" key={5}>
                        <div>
                            <Mir {...props} />
                        </div>
                    </TabPane>
                    {/* <TabPane tab="Vendors" key="6">
                        <div>
                            Vendors 
                        </div>
                    </TabPane> */}
                    <TabPane tab="Sub Contractors" key={7}>
                        <GCDisplay />
                        
                    </TabPane>    
                </Tabs>
            </div>
        }
       
    />

CodePudding user response：

You not need to add setkeys hooks in antd.

import { Tabs } from 'antd';

const { TabPane } = Tabs;

function callback(key) {
  console.log(key);
}

const Demo = () => (
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="Tab 1" key="1">
      Content of Tab Pane 1
    </TabPane>
    <TabPane tab="Tab 2" key="2">
      Content of Tab Pane 2
    </TabPane>
    <TabPane tab="Tab 3" key="3">
      Content of Tab Pane 3
    </TabPane>
  </Tabs>
);

ReactDOM.render(<Demo />, mountNode);

CodePudding user response：

I used localStorage.setitem() to store key value of tab and replace defaultkey value with localStorage.getitem("keys") and its workings

const ProjectDetails = (props) => {
    const [key, setKey] = useState("1");
    const callback = (k) => {
        localStorage.setItem("keys", k)
        setKey(k);


    }


    const { projectId } = useParams();

    return (
        <MainLayout
            component={
                <div className="flex-container">
                    <Tabs defaultActiveKey= 
{localStorage.getItem("keys")} onChange={callback} className="flex- 
 child" transition={false}>
                    <TabPane tab="Project Overview" key={1}>
                     <SingleProject {...props} />
                        
                    </TabPane>


                    <TabPane tab="Models" key={2}>
                        <div>
                         
                                <Model {...props} />
                        
                        </div>
                    </TabPane>
                    <TabPane tab="360 Tour" key={3}>
                        <div>
                            <Assests {...props} />
                        </div>
                    </TabPane>
                    <TabPane tab="Documents" key={4}>
                        <div>

                            <Document {...props} />
                        </div>
                    </TabPane>
                    <TabPane tab="M.I.R" key={5}>
                        <div>
                            <Mir {...props} />
                        </div>
                    </TabPane>
           
                    <TabPane tab="Sub Contractors" key={7}>
                        <GCDisplay />