javascript - 单击react中的链接时处理异常

我在react-table中显示了一个href链接，该链接调用了Spring后端应用程序。列的示例代码

Header: '',
Cell: row => {
return (
    <div>
        <a href=/url/apicall/>>
        </a>
    </div>
)
}

问题是，如果将文件作为字节流url，我的问题是，如果存在异常，则应用程序将重定向到常见错误页面。

我该如何更好地处理呢？我的想法是创建一个方法并在href中调用并处理该方法中的响应，而不是直接提供href。
有什么建议么 ？
谢谢，

最佳答案

您可以在反应中使用Error boundaries


  如果类组件定义了（或
  两者）的生命周期方法静态getDerivedStateFromError（）或
  componentDidCatch（）。使用静态getDerivedStateFromError（）呈现
  引发错误后的后备用户界面。使用componentDidCatch（）来
  记录错误信息。componentDidCatch生命周期方法是
  在后代组件引发错误之后调用。的
  方法接收两个参数
  
  错误发生后，将调用componentDidCatch生命周期方法
  被后代组件抛出。该方法接收两个
  参数
  
  1 /错误：–引发的错误对象
  
  2 /信息：–具有componentStack键的对象包含
  有关哪个组件引发错误的信息。
  
  错误发生后，将调用componentDidCatch生命周期方法
  被后代组件抛出。该方法接收两个
  参数
  
  componentDidCatch（错误，信息）


首先，您需要像这样创建ErrorBoundaries组件

class ErrorHandlerBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    errorHandlerService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return Something went wrong.;
    }

    //otherwise just render child props as normally
    return this.props.children;
  }
}

所以我们需要像这样将组件添加到错误边界组件中

//Then we just need to define our component like this
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: true };
  }

  render() {
    if (this.state.error) {
      // Simulate a JS error
      throw new Error("oops");
    }
    return <h1> Hello world</h1>;
  }
}

然后像这样使用

<ErrorHandlerBoundary>
  <MyComponent />
</ErrorHandlerBoundary>

关于javascript - 单击react中的链接时处理异常，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57672636/