0

我有一个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组件而不是保存状态吗？

编辑：这里有一些关于如何在这个 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
4

1 回答 1

0

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

于 2017-03-23T14:39:39.677 回答