Javascript 使用“反应响应”选项卡时更新反应组件

在我的react应用程序中，当我进行服务器端更新时，我返回一个用于更新父组件状态的响应。但对于我使用响应选项卡的组件，它们不会得到更新。 这是我的代码：

import React, {Component, Fragment} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import PageTitle from '../../../Layout/AppMain/PageTitle';

import {
    faAngleUp,
    faAngleDown,
    faCommentDots,
    faBullhorn,
    faBusinessTime,
    faCog
} from '@fortawesome/free-solid-svg-icons';

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';

import Tabs from 'react-responsive-tabs';

import Roles from './Roles';
import Priviledges from './Priviledges';

export default class Apage extends Component {

    constructor(props) {
        super(props);

        this.state = {
            api: this.props.api,
            session: this.props.session
        }
    }

    componentWillMount() {
        this.tabsContent = [
            {
                title: 'Roles',
                content: <Roles api={this.state.api} session={this.state.session} />
            },
            {
                title: 'Priviledges',
                content: <Priviledges api={this.state.api} session={this.state.session} />
            }
        ];
    }

    getTabs() {
        return this.tabsContent.map((tab, index) => ({
            title: tab.title,
            getContent: () => tab.content,
            key: index,
        }));
    }

    onTabChange = selectedTabKey => {
        this.setState({ selectedTabKey });
    };


    render() {

        return (
            <Fragment>
                    <PageTitle
                        heading="Roles & Priviledges"
                        subheading=""
                        icon="lnr-apartment icon-gradient bg-mean-fruit"
                    />
                    <Tabs selectedTabKey={this.state.selectedTabKey} onChange={this.onTabChange} tabsWrapperClass="body-tabs body-tabs-layout" transform={false} showInkBar={true} items={this.getTabs()}/>
            </Fragment>
        )
    }
}

<Tabs onChange={() => this.onTabChange()} selectedTabKey={this.state.selectedTabKey}  tabsWrapperClass="body-tabs body-tabs-layout" transform={false} showInkBar={true} items={this.getTabs()}/>

但我无法让它为我工作。有线索吗？

---

我正在使用laravel mix在laravel中运行我的React JS。实际上，每当我使用

setState

提交表单时，我都打算更新下拉列表。当我使用React JS作为REST API时，我已经多次这样做了。

您需要像这样进行更改-

onChange={（）=>this.onTabChange（）}

<Tabs onChange={() => this.onTabChange()} selectedTabKey={this.state.selectedTabKey}  tabsWrapperClass="body-tabs body-tabs-layout" transform={false} showInkBar={true} items={this.getTabs()}/>

见下文-

<Tabs onChange={() => this.onTabChange()} selectedTabKey={this.state.selectedTabKey}  tabsWrapperClass="body-tabs body-tabs-layout" transform={false} showInkBar={true} items={this.getTabs()}/>

this.onTabChange（）}selectedTabKey={this.state.selectedTabKey}tabsWrapperClass=“body tabs body tabs layout”transform={false}showInkBar={true}items={this.getTabs（）}/>

服务器发出响应后，我使用套接字IO触发组件内的

设置状态。尽管我更喜欢整洁一点的。
这个答案有点不可能。不起作用。您使用了onChange={（）=>this.onTabChange（）？是的。它不起作用，如果我打开一个模式，我会将我的选项卡切换回第一个
<Tabs onChange={() => this.onTabChange()} selectedTabKey={this.state.selectedTabKey}  tabsWrapperClass="body-tabs body-tabs-layout" transform={false} showInkBar={true} items={this.getTabs()}/>