有状态的组件在查询重新获取时失去状态

【问题标题】：Stateful components loosing state on query refetch有状态的组件在查询重新获取时失去状态
【发布时间】：2019-07-27 08:57:51
【问题描述】：

有状态组件在Query 组件重新获取时丢失其状态是否正确？ Query 组件中的所有组件都必须使用 Apollo 客户端状态吗？

这是一个小演示：https://codesandbox.io/s/qxx6jk3yz9（增加计数然后重新获取 - 计数将被重置）

这里是演示代码的主要部分：

<ApolloProvider client={client}>
  <div className="App">
    <Query query={GET_ALL_FILMS}>
      {({ data, loading, refetch }) => {
        if (loading) return "Loading...";

        return <Counter refetch={refetch} />;
      }}
    </Query>
  </div>
</ApolloProvider>

【问题讨论】：

包含演示非常有帮助，非常感谢！在您的问题中至少包含一些相关代码通常也是一个好主意，即使您包含指向演示的链接。如果演示链接最终失效，我们希望确保您的问题仍然与未来的读者相关。
好的，感谢您的编辑。我会记住我的下一个问题

标签： apollo react-apollo apollo-client

【解决方案1】：

Query 组件的渲染函数内部有一个条件，即

if (loading) return "Loading...";

loading 状态不仅在初始加载时更新，而且在任何时候调用 refetch 时都会更新。这意味着当您点击 refetch 时，只会呈现 Loading... 并卸载整个 Counter 组件。当加载状态变回false 时，Counter 组件再次被渲染，但由于这是一个新组件，它以一个新状态开始。

如果您注释掉条件，您会看到应用程序的行为符合您的预期。

有多种方法可以解决这个问题。这是三个：

通过 Apollo、Redux 或其他一些状态管理库管理状态
提升状态，使其存储在 Query 组件的父组件中，然后将状态向下传递给您的 Counter 组件，并附带一个对其进行变异的函数。
与其不渲染 Counter 组件，不如将其隐藏，例如将 display 设置为 none。

【讨论】：