反应选项卡：未捕获类型错误：切换回主选项卡时无法读取 null 的属性"数据"？

Question

我有一个Main.js，它是一个 React 类，它整合了其他 React 类。这很好用，但我现在想要三个选项卡;第一个包含上述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}>，这将跟踪所有三个选项卡的状态，而不仅仅是您所在的选项卡。