Границы React Error не работают должным образом с асинхронной функцией

Question

Таким образом, в основном я жду, пока Auth вернет текущего аутентифицированного пользователя из aws ampify / cognito, затем запускаю запрос, чтобы получить их данные (я намеренно выдавал ошибку, чтобы я мог проверить функциональность границы ошибок в этомситуация).Я импортирую client.ts в app.tsx и вызываю функцию getData, передавая ей параметры, а затем возвращаю объект ошибки axios вызывающей функции.Я столкнулся с несколькими проблемами и не смог заставить ни одну из них работать должным образом с этим, как объяснено ниже:

1. Если я установлю «throw» в данных [0].ошибка условная, это дает мне невыполненное Обещание, так как я не отклоняю () Обещание там вручную.Когда я пытаюсь сделать это, я получаю некоторую ошибку машинописи из-за невозможности сделать это, потому что у Компонента нет такого типа того или иного (я передам и опубликую фактическую ошибку)

2. 2) Если я устанавливаю throw в функции рендеринга с условным значением, основанным на state.hasError, он работает и попадает в границу ошибки, но затем выдает ошибку, потому что у меня возникло необработанное исключение, потому что я не улавливаю эту ошибку.

3. Если я улавливаю ошибку, генерируемую в функции рендеринга, она попадает в границу ошибки, но потом жалуется, что render () ничего не возвращает

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

App.tsx:

async componentDidMount() {

      await Auth.currentAuthenticatedUser().then( data => {
        this.onGetAuthUser(data.username);
        var username = data.username;
        //rockset query --need to implement error handling elsewhere
        getData('select * from "ruzzleLeagueCollection" WHERE username=:username', 
        [{"name": "username",
        "type": "string",
        "value": data.username}]).then((data: any) => {

          if(data[0] != null) {
            if(data[0].error != null) {
             this.setState({error: true, errorData: data[0].error});
             return;
            }else {
             //get the logged in user.
            this.onGetLoggedUser(data[0]);
            }
          }else {
            //create the loggedUser object and pass it
            this.onGetLoggedUser([{
              username: username,
              ruzzleName: null,
              group: 0,
              hasProfile: false,
              currentSkill: null,
              highestSkill: null
            }])
          }
        });
      });  

  }
  render() {
    try{
    if(this.state.error) throw this.state.errorData;
    return (
      <div >    

          <Router>
            <div>
              <NavBar/>            
              <Switch>
                <Route exact path="/" component={Home}/>}/>
                <Route path="/players" component={Players} />
                <Route path="/season" component={Season} />
                <Route path="/records" component={Records} />
                <Route path="/stats" component={Stats}/>
                <Route path="/admin" component={Admin}/>
              </Switch>
            </div>
          </Router>

      </div>
    )
    } catch(err) {
      console.log('error caught!');
  }
  }

client.ts

import axios from 'axios';

const apiKey =  'fgf' //process.env.REACT_APP_ROCKSET_APIKEY;
const apiServer = process.env.REACT_APP_ROCKSET_APISERVER;

const url = apiServer + '/v1/orgs/self/queries';
const headers = { headers: {'Authorization': 'ApiKey ' + apiKey}};

var data = {'sql':{
    'query': '',
    'parameters': [
    ]}
}

//GET REQUEST
export async function getData(query: string, parameters: any) {
    data.sql.query = query;
    data.sql.parameters = parameters == null? undefined:  parameters;
    try {
        const response = await axios.post(url, data, headers)
        return response.data.results;
    }catch(err) {
        console.error('The following error occurred ' + err.message)
        if(err.response) {
            return handleErrors(err.response, 'response');

        }else if(err.request) {
            return handleErrors(err.request, 'request');

        }else {
           return handleErrors(err, 'other');

        }   
    }
} 

function handleErrors(error: any, errorType: string) {
    switch(errorType) {
        //this is a response error
        case 'response': 
            return [{error: {
                data: error.data,
                status: error.status,
                headers: error.headers
            }
            }]
        case 'request':
            return [{ error: 
                    { data: error.request}
                }]
        default:
            return [{error: {
                data: error.message}
            }]
    }
}

Errors.tsx:

export class Errors extends Component<any,IState>{
    constructor(props:any){
        super(props);
        this.state = {
            hasError: false,
            alertOpen: true,
            error: null,
            info: null
        };
    }

    componentDidCatch(e: any, info: any) {
        this.setState({
            hasError: true,
            error: e,
            info: info
        });
    }

      closeAlert() {
        this.setState({alertopen: false, hasError: false})
    }
      //render the error screen
      render() {
          if(this.state.hasError){
              var msg = 'Oops! Something went wrong. Error:  ' + this.state.info.componentStack;
              var title = 'Error in ' + this.state.error.data.message + ' ' + this.state.error.status;
          return(
            <div>
                <React.Fragment>
                    <AlertDialogSlide
                        open={this.state.alertOpen}
                        title = {title}
                        message= {msg}
                        closeAlert={() => this.closeAlert()}
                        error={true}
                    >     
                    </AlertDialogSlide>
                </React.Fragment>
            </div>
          )
      }
      return this.props.children;
    }

}

index.js (точка входа) - Обтекание границы ошибки

ReactDOM.render(
    <Provider store={store}>
        <Errors>
            <App />
        </Errors>
    </Provider>
, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();