我一直在尝试使用react-cache风格的组件，并在渲染方法中直接调用Web服务，向React.Suspense组件抛出一个 promise ，并在数据存在时重新渲染。他们调用 Web 服务，检查响应，然后根据响应呈现或抛出错误，直至达到错误边界。我注意到，每当组件中抛出错误时，它都会呈现两次。第一次调用堆栈看起来正常，第二次调用堆栈包含对 invokeGuardedCallbackDev 和 invokeGuardedCallback 的调用，这似乎与 React 有关，确保即使在开发构建中被错误边界“捕获”时，错误也会出现在控制台中.
我可以通过react和react-dom 16.8.6重现这个，只需渲染一个像这样的组件:https://codesandbox.io/s/components-that-throw-render-twice-i26qc .
我想知道为什么会发生这种情况，因为它导致组件从 Web 服务重新获取数据，重新抛出另一个 Promise，并导致控制台中出现“Uncaught Promise”错误。
最佳答案
这似乎是由最近的react/react-dom 变化引起的。如果将两者都恢复到版本 16.0.0，您将看到它仅渲染组件一次。请参阅:https://codesandbox.io/s/components-that-throw-render-twice-03fdb
查看version history ，似乎修复了一些与 React 中的错误处理相关的错误，因此这次重新渲染似乎是针对其中一个错误的解决方法的结果。
但是，这对于您的应用程序来说应该不是问题，因为 React 应用程序中的渲染函数应该是纯的(无副作用)。所以基本上，React 可以随时调用你的渲染函数。
要解决此问题，您应该避免依赖不重新渲染的组件，而应使用效果钩子(Hook)或类似的方法，仅在某些 Prop /状态更改时才获取。
来源:https://github.com/facebook/react/issues/16130#issuecomment-521637592
关于reactjs - 为什么抛出错误的 React 组件会渲染两次？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57717298/