Question

有状态组件在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>

Answer 1

在Query组件的render函数中有一个条件，即

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

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

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

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

通过Apollo，Redux或其他一些状态管理库来管理状态
提升状态，以便将其存储在Query组件的父组件中，然后将状态传递给Counter组件，以及将其变异的函数。
例如，通过将display设置为none，可以隐藏它而不是不显示Counter组件。

有状态组件在查询refetch上失去状态

1 个答案: