双重渲染使用

Question

我尝试通过react上下文提供程序获取异步提取数据 我不明白为什么会有2个渲染子组件使用上下文，其中第一个是初始上下文状态，第二个是获取数据。 有什么适当的方法可以避免它？

codesandbox example

Answer 1

这实际上是正常行为。由于您的提取请求是异步的，因此需要一些时间来解决。

首先，您的组件将使用默认数据进行渲染（根据DogProvider.js，第5行显示为空数组），然后在您的获取解析后，您将更新提供程序的状态，从而使其（及其子级）重新呈现。

Answer 2

当上下文更改时，消费者将始终重新渲染。对于您而言，只要您在提供者中使用新数据调用setState，它就会更改。您可以有条件地在没有数据的情况下在提供程序中渲染children，但不能阻止子级在上下文更新时重新渲染。

一种常见的模式是在数据可用之前呈现加载指示器。

您还可以将使用者包装在一个自定义组件中，该组件检查上下文是否为空，但仍将呈现两次。