React-tabs: Uncaught TypeError: Cannot read property 'data' of null, when switching back to main tab?

Question

我有一个 Main.js，它是一个 React class，它整合了其他 React classes。这很好用，但我现在想要三个选项卡；第一个包含上述 Main.js，但其他包含不同的东西。

使用 react-tabs 我已经成功地完成了它。这里创建了三个选项卡：

<Tabs>
    <TabList>
        <Tab>Main</Tab>
        <Tab>Second</Tab>
        <Tab>Third</Tab>
    </TabList>
     <TabPanel>
        Main goes here.
     </TabPanel>
     <TabPanel>
        Second goes here.
     </TabPanel>
     <TabPanel>
        Third goes here.
     </TabPanel>
</Tabs>

Main 选项卡可以正常呈现和显示。但是，如果我单击 Second 选项卡，然后返回 Main，我将收到以下错误：TypeError: Cannot read property 'data' of null.

我知道哪里出错了；即第一次使用来自 this.state 的数据。

出了什么问题？是因为它试图重新渲染整个 Main 组件而不是保存状态吗？

编辑：这里有一些关于如何在此主要组件中管理状态的指示。

getInitialState: function() {
        return { data : {
            info : {},
            hist : {},
            grouped : {},
            cars : {},
            user : "",
            map :  {},
        }}},

我们将上面的值实例化为空。

当组件安装时，它是这样填充的：

componentDidMount : function() {
    this.loadData();
    setInterval(this.loadData, 60000);
}

每 60 秒加载一次。

loadData 函数是这样的：

loadData : function() {
        console.info("Loading data.. ");
                $.ajax({
        url: this.props.prefix_url + "/api",
        dataType: 'json',
        cache: false,
        success: function(data) {
            console.info("Received backend data ");
            this.setState({data: data }); // Attach data to the empty values
// .. Goes on

Answer 1

解决方案是将 forceRenderTabPanel={true} 添加到选项卡，如下所示： <Tabs forceRenderTabPanel={true}> ，这将跟踪所有三个选项卡的状态，而不仅仅是您所在的选项卡。

React-tabs: Uncaught TypeError: Cannot read property 'data' of null, when switching back to main tab?

React-tabs: Uncaught TypeError: Cannot read property 'data' of null, when switching back to main tab?

javascript

tabs

reactjs

react-tabs