Компоненты с состоянием теряют состояние при повторном запросе - PullRequest
Новая
       10

Компоненты с состоянием теряют состояние при повторном запросе

2 голосов
/ 05 марта 2019

Правильно ли, что компоненты с состоянием теряют свое состояние при Query повторном вызове компонента?Должен ли я использовать состояние клиента Apollo для всех компонентов внутри Query компонентов?

Вот небольшая демонстрация: 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>

1 Ответ

3 голосов
/ 06 марта 2019

В функции рендеринга компонента Query есть условие, а именно 

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

Состояние loading обновляется не только при начальной загрузке, но и при каждом повторном вызове. Это означает, что когда вы нажимаете кнопку refetch, отображается только Loading..., а весь компонент Counter отключается. Когда состояние загрузки изменяется обратно на false, компонент Counter отображается снова, но, поскольку это новый компонент, он запускается со свежим состоянием.

Если вы закомментируете условие, вы увидите, что приложение ведет себя так, как вы ожидали.

Существует множество способов решения этой проблемы. Вот три:

  • Управление состоянием с помощью Apollo, Redux или другой библиотеки управления состоянием
  • Поднимите состояние так, чтобы оно сохранялось в родительском компоненте компонента Query, а затем передайте это состояние вашему компоненту Counter вместе с функцией для его изменения.
  • Вместо того, чтобы не отображать компонент Counter, просто скройте его, например, установив display в none.
...