Javascript React引导选项卡：每次选择任何给定选项卡时，都会触发一个选项卡中的Ajax调用

我正在尝试使用

react引导程序

（docs），在这里我创建了3个选项卡。最初加载的第一个选项卡在第一次加载时成功地进行Ajax调用

然而，即使选项卡未打开，每次在选项卡之间切换都会进行此Ajax调用

我尝试了API中的

mountoneneter

和

unmountonnexit

选项。但是，这会导致第二次（第一次）无法加载此选项卡，并声称未定义不同组件中的数据（这意味着未进行Ajax调用）

具体来说，它将抛出错误

uncaughttypeerror:cannotreadproperty'data'of null

，我没有得到这个错误：组件应该进行Ajax调用

我如何处理这个问题？是因为它只加载了

组件didmount

？它不应该运行

this.ajaxCall（）何时再次打开给定选项卡

代码示例：

let TabExample = React.createClass({
  getInitialState() {
    return {
      key: 1
    };
  },

  handleSelect(key) {
    this.setState({key});
  },

  ajaxCall : function() { // Ajax call is made here.. 

  componentDidMount : function () {
  this.ajaxCall();
  }

  render() {
    return (
      <Tabs activeKey={this.state.key} onSelect={this.handleSelect} id="controlled-tab-example">
        <Tab eventKey={1} title="Tab 1">Tab 1 content with ajax call</Tab> // Ajax here
        <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab> // No ajax
        <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab> // No ajax
      </Tabs>
    );
  }
});

让TabExample=React.createClass({
getInitialState（）{
返回{
关键词：1
};
},
handleSelect（键）{
this.setState（{key}）；
},
ajaxCall:function（）{//Ajax调用在这里进行。。
componentDidMount:函数（）{
这个.ajaxCall（）；
}
render（）{
返回(
表1使用ajax调用的内容//此处为ajax
表2内容//无ajax
表3内容//无ajax
);
}
});