Question

在React中渲染组件（包含许多子组件）并且出于任何原因抛出JS错误时，最好的方法是什么？当然，我可以捕获错误，但最终你想要呈现的东西可能无法，因为缺少需要的信息。您可以使用propTypes中的.isRequired提前验证，但只有在失败时才会设置警告。

Answer 1

React 16引入了一个名为“error boundary”的新概念来处理React组件内部发生的错误，而不会破坏整个应用程序。

错误边界是捕获JavaScript错误的React组件在子组件树中的任何位置，记录这些错误并显示一个后备UI 而不是崩溃的组件树。

错误使用新的生命周期方法componentDidCatch(error, info)可以实现边界组件。与其他生命周期方法不同，只有在渲染期间，生命周期方法或组件的任何子级（包括所有大子级）组件的构造函数中发生任何错误时，才会调用此方法。

在代码中，Error Boundary组件将如下所示。

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

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Error occurred!</h1>;
    }
    return this.props.children;
  }
}

我们可以将此错误边界组件用作代码中的普通组件。

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

现在，如果MyComponent在渲染，生命周期方法或构造过程中抛出任何JavaScript错误，则错误边界组件的componentDidCatch将触发并更改状态以显示Error occurred!消息而不是损坏的MyComponent

此新功能带来了在迁移到React 16之前您想要了解的另一个重要含义。以前，如果发生错误，即使在重新加载页面之前它通常不能按预期工作，也会留下损坏的UI 。但是，在React 16中，如果错误没有被任何错误边界处理，则会导致整个应用程序的卸载。

因此，适当地为您的应用添加错误边界将为您的用户提供更好的体验。因此，即使某些UI区域崩溃，用户也可以与您的应用程序的一部分进行交互。

有关详细信息，请参阅React official documentation on error boundaries或this official blog post。它们涵盖了您需要了解的有关此新功能的所有内容。

Answer 2

通常你不应该有一些会导致js错误的东西。如果它等待来自服务器的数据然后不渲染它。除此之外，你会有某种形式的通知/消息显示它尚未加载。

因此，例如，如果你有一个组件来渲染东西，你可以有条件地渲染组件。

又名

render(){
  let {serverData} = this.props;
  return (
    <div className="something">
      {Boolean(serverData) && serverData.length > 0 
        ? <MyComponent data={serverData} />
        : <LoadingComponent />
      }
    </div>
  )
}

现在，这只是描述我所谈论内容的一个基本例子。 Javascript异常会破坏您的单页应用程序，您不应该有任何。如果无效的内容重定向到404页面。如果组件需要数据，则等待数据呈现它。

另一个重要的事情是，如果你试图访问类似this.props.myData.obj.something.somethingelse的东西，那么对象路径不会总是在那里。你需要确保每个都没有未定义或为null。我使用lodash，它具有非常棒的功能

_.get(this.props, 'myData.obj.something.somethingelse')`

如果其中任何一个键不存在或未定义/不是对象

，则返回undefined

我想这个故事的寓意是你应该主动在你的代码中捕获可能破坏的东西，从不假设变量类型以及它的数据将在那里：）

Answer 3

对于React v16及更高版本，推荐的方法是使用错误边界。 React团队的这一页（简短而良好）介绍了该功能： https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html。它还包括一个指向Codepen演示的链接。

Answer 4

UI的一部分出现JavaScript错误不应破坏整个应用。为了解决React用户的这个问题，React 16引入了“错误边界”的新概念。

错误边界是React组件，可在其子组件树中的任何位置捕获JavaScript错误，记录这些错误，并显示后备UI，而不是崩溃的组件树。错误边界会在渲染期间，生命周期方法以及它们下面的整个树的构造函数中捕获错误。

如果类组件定义了一个名为componentDidCatch(error, info)的新生命周期方法，则该类组件将成为错误边界。

ref link

React最佳实践中的错误处理

4 个答案: