Состояние вкладки утеряно, когда элемент управления находится в компоненте ErrorBoundary - PullRequest
Новая
       24

Состояние вкладки утеряно, когда элемент управления находится в компоненте ErrorBoundary

0 голосов
/ 17 сентября 2018

У нас есть приложение на основе реагирования js, и для обработки ошибок мы использовали компонентный подход ErrorBoundary.Это работает очень хорошо, но у нас есть вкладка, и мы находимся на второй вкладке, где у нас есть какое-то исключение, поэтому, показывая сообщение об ошибке с помощью ErrorBoundary, мы потеряли состояние вкладки вкладки, и снова страница показывает первую вкладку.Ниже приведен код:

Компонент 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;

Раздел вкладок: 

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>
        )
    }

Как мы можемподдерживать состояние так, чтобы мы были на второй вкладке, если есть какие-либо исключения, когда мы находимся на второй вкладке этой страницы.Пожалуйста, предложите.

...