Question

我遇到的问题是，在诺言中抛出的错误没有被错误边界组件捕获。

该代码从服务器获取数据，并使用状态代码来确定如何处理响应中的数据。 extension UIViewController { var navigationBarbarContentStart: CGFloat { return self.navigationBarTopOffset + self.navigationBarHeight } var navigationBarTopOffset: CGFloat { return self.navigationController?.navigationBar.frame.origin.y ?? 0 } var navigationBarHeight: CGFloat { return self.navigationController?.navigationBar.frame.height ?? 0 } }用作客户端，并设置了拦截器来处理响应。

string message  = string.Format("Your event # {0}, is started at \"{1}\" in Texas.", eventId, eventTime);

我已经建立了一个axios组件来捕获其子组件中引发的错误：

API.interceptors.response.use((response) => {
  switch (response.status) {
    case 500:
    case 403:
      throw new Promise((resolve) => resolve(response.status));
  }
});

它用作：

ErrorBoundary

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, }; } componentDidCatch(error) { this.setState({ hasError: true, }); if (error instanceof Promise) { error.then(() => console.log(error)); } else { console.log(error); } } render() { return this.state.hasError ? ( <span>Something went wrong but it is okay</span> ) : ( this.props.children ); } }组件以<ErrorBoundary> <Child /> </ErrorBoundary>方法从服务器获取一些数据。

Child

当服务器响应的状态代码导致抛出componentDidMount时，componentDidMount() { API.getData().then((data) => { ... }); }组件应该捕获它，但不会捕获它。如果在Promise方法内明确抛出错误，则错误边界会做出相应的反应。例如：

ErrorBoundary

总是可以用componentDidMount捕获错误，但是有没有办法让componentDidMount() { throw new Error(); // or throw new Promise(resolve => resolve()); }组件捕获这些错误？

Answer 1

你可以试试 ElevatedButton( child: Text("click to switch"), onPressed: (){ Provider.of<SwitchHelper>(context).updateValue(); } ), npm 包。他们有 react-error-boundary 钩子来处理异步代码。

请参阅此页面了解更多信息 - https://github.com/bvaughn/react-error-boundary#useerrorhandlererror-error

拒绝承诺时如何触发React错误边界？

1 个答案: