Question

我们有一个基于react js的应用程序，对于错误处理，我们使用了ErrorBoundary组件方法。效果很好，但是我们有一个Tabstrip，我们在第二个Tab上，这里有一些异常，因此在使用ErrorBoundary显示错误消息时，我们丢失了Tabstrip的选项卡状态，并且页面再次显示了第一个选项卡。下面是代码：

ErrorBoundary组件：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      errorInfo: null
    };
  }

  componentDidCatch(error, errorInfo) {
    // Catch errors in any child components and re-renders with an error message
    this.setState({
      error: error,
      errorInfo: error.message
    });
  }

  render() {
    if(this.state.error){
    return (
        <div>
          <div>{this.props.children}</div>
          <div><Modal errMessage = {this.state.errorInfo}></Modal></div>
        </div>
     );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

Tabstrip部分：

render() {
        return (
            <div className="container">
                <div className="row"><br/></div>
                <div>
                    <BackLink></BackLink>
                    <h5 className="main-heading-blue">Manage Network Details</h5>
                </div>
                <div id="networkNameHeader">{this.networkName}</div>
                <TabStrip tabPosition="top" selected={this.state.selected} onSelect={this.handleSelect}>
                    <TabStripTab title="Network Details">
                        {this.state.mode === 'view' ?
                            <NetworkView networkId={this.networkId}></NetworkView> :
                            <NetworkAddEdit networkId={this.networkId}></NetworkAddEdit>
                        }
                    </TabStripTab>
                    <TabStripTab title="Assigned Providers" disabled={this.networkId>0?false:true} >
                        <NetworkProviders networkId={this.networkId}></NetworkProviders>
                    </TabStripTab>
                </TabStrip>
            </div>
        )
    }

我们如何保持状态，以便当我们在该页面的第二个选项卡上时，如果有任何异常，我们将在第二个选项卡上。请提出建议。

当控件在ErrorBoundary组件中时，Tabstrip选项卡状态丢失

0 个答案: