javascript - react tabs call componentDidMount every time when switching tab - Stack Overflow

admin管理员组

文章数量:1345078

I'm using this react library: , I have created a simple Component like this:

export default class Sample extends Component {

    ponentDidMount() {
        console.log("Mount");
    }

    render () {
    return (

            <div>
             Hello
            </div>
    );
  }
}

And I have inserted it inside the tabs in my sample app:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import Sample from './Sample.jsx';

class App extends Component {
  handleSelect(index, last) {
    console.log('Selected tab: ' + index + ', Last tab: ' + last);
  }

  render() {
    return (


      <Tabs
        onSelect={this.handleSelect}
        selectedIndex={2}
      >

        <TabList>

          <Tab>Foo</Tab>
          <Tab>Bar</Tab>
          <Tab>Baz</Tab>
        </TabList>

        <TabPanel>
          <Sample />
        </TabPanel>
        <TabPanel>
          <Sample />
        </TabPanel>
        <TabPanel>
          <Sample />
        </TabPanel>
      </Tabs>
    );
  }
}

render(<App/>, document.getElementById('container'));

And every time I switch Tab the ponentDidMount is called and I can see the Mount log in the console. My question is how can avoid calling the ponentDidMount method every time, but calling it only the first time? I make this question because I want add an Ajax call inside it and I don't want make the Ajax call every time I switch the tab, but only one time.

Thanks

I'm using this react library: https://github./reactjs/react-tabs, I have created a simple Component like this:

export default class Sample extends Component {

    ponentDidMount() {
        console.log("Mount");
    }

    render () {
    return (

            <div>
             Hello
            </div>
    );
  }
}

And I have inserted it inside the tabs in my sample app:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import Sample from './Sample.jsx';

class App extends Component {
  handleSelect(index, last) {
    console.log('Selected tab: ' + index + ', Last tab: ' + last);
  }

  render() {
    return (


      <Tabs
        onSelect={this.handleSelect}
        selectedIndex={2}
      >

        <TabList>

          <Tab>Foo</Tab>
          <Tab>Bar</Tab>
          <Tab>Baz</Tab>
        </TabList>

        <TabPanel>
          <Sample />
        </TabPanel>
        <TabPanel>
          <Sample />
        </TabPanel>
        <TabPanel>
          <Sample />
        </TabPanel>
      </Tabs>
    );
  }
}

render(<App/>, document.getElementById('container'));

And every time I switch Tab the ponentDidMount is called and I can see the Mount log in the console. My question is how can avoid calling the ponentDidMount method every time, but calling it only the first time? I make this question because I want add an Ajax call inside it and I don't want make the Ajax call every time I switch the tab, but only one time.

Thanks

• javascript
• reactjs

Share Improve this question Follow edited Mar 5, 2017 at 23:50 Dimitris Karagiannis 9,39699 gold badges4545 silver badges7474 bronze badges asked Mar 5, 2017 at 23:20 PieroPiero 9,2732121 gold badges9393 silver badges162162 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You can use forceRenderTabPanel={true} on the <Tabs/> ponent so that the tabs stay mounted.

<Tabs
  onSelect={this.handleSelect}
  selectedIndex={2}
  forceRenderTabPanel={true}
>

I have just had the same problem. All your ponents need to exist at the same time and use this.STATE.tabIndex and CSS to control the invisibility.

Create the Tabs with controlled mode:

class App extends Component {
  constructor() {
    super();
    this.state = { tabIndex: 0 };
  }
  render() {
    return (
      <Tabs onSelect={tabIndex => this.setState({ tabIndex })}>
        <TabList>
          <Tab>Title 1</Tab>
          <Tab>Title 2</Tab>
        </TabList>
        <div style={this.state.tabIndex===0 ? 
          {display:"block"}: {display:"none"}} >
        </div>
        
        <div style={this.state.tabIndex===0 ? 
          {display:"block"}: {display:"none"}} >
        </div>

      </Tabs>
    );
  }
}

Every time React adds a ponent to the DOM ponentDidMountwill fire, there is no way around that.

In your case, when you switch tabs, I assume that React unmounts the current content of the TabPanel ponent and mounts the new content, which is your Sample ponent, which in turn, once mounted, will fire the ponentDidMount method.

Depending on what your AJAX call returns, you should probably rethink where to place the AJAX call.

本文标签： javascriptreact tabs call componentDidMount every time when switching tabStack Overflow