reactjs - React 错误边界无法与异步函数正常工作

Question

所以基本上我等待 Auth 从 aws amplify/cognito 返回当前经过身份验证的用户，然后我运行查询以获取他们的数据(我故意让它出错，以便在这种情况下检查错误边界的功能)。我在app.tsx中导入client.ts，调用getData函数传入参数，然后将axios错误对象返回给调用函数。我遇到了一些问题，但无法让它们中的任何一个正常工作，如下所述:

如果我在 data[0].error 条件中设置“抛出”，它给出
我没有捕获 promise ，因为我没有拒绝()那里的 promise
手动。当我尝试这样做时，我会收到一些关于 typescript 的错误
无法做到这一点，因为 Component 没有那种类型
某事或其他(我将重做并发布实际错误)

2)如果我在渲染函数中设置 throw 有条件
基于 state.hasError，它可以工作并达到错误边界，但是
然后抛出一个错误，因为我有一个未捕获的异常，因为我
没有发现我抛出的错误

如果我捕捉到渲染函数中抛出的错误，它
达到错误边界，但随后提示 render() 不是
退货

因此，从设计的角度寻求有关如何改进这一点的建议
我发现的所有示例的问题是它们是简单的示例，其中异步调用是直接在组件中进行的，而错误是直接在我不想真正做的组件中处理的，因为当我可以简单地将代码传递给驻留在一个地方的函数以返回我想要的内容时，我喜欢不必一遍又一遍地重复代码。

应用程序.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!');
  }
  }

客户端.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}
            }]
    }
}

错误.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();

Answer 1

如 react docs 中所述: 错误边界做不是 捕获异步代码的错误:
错误边界不会捕获以下错误:

事件处理程序

异步代码(例如 setTimeout 或 requestAnimationFrame 回调)

服务端渲染

在错误边界本身(而不是其子项)中引发的错误