时间戳

首页 > 解决方案 > fetchMore 导致页面意外重新渲染

reactjs - fetchMore 导致页面意外重新渲染

问题描述

我有一个无限滚动列表。我最近更新到最新的 Apollo 客户端，发现无限滚动不再有效。

经过深入调查。我注意到当我使用递增的跳过调用 fetchmore 时，它​​会导致整个页面重新呈现。有任何想法吗？

询问：

   const {
      data,
      loading: queryLoading,
      fetchMore,
      error,
      networkStatus
    } = useQuery(SEARCH_PROFILES, {
      variables: { ...searchParams, skip: skip.current },
      fetchPolicy: "cache-first",
      notifyOnNetworkStatusChange: true
    });

获取更多

 const fetchData = () => {
      ErrorHandler.setBreadcrumb("Fetch more profiles");
      skip.current =
        skip.current + parseInt(process.env.REACT_APP_SEARCHPROS_LIMIT);
      const intLimit = parseInt(process.env.REACT_APP_SEARCHPROS_LIMIT);

      if (hasMore.current) {
        fetchMore({
          variables: {
            searchType,
            long,
            lat,
            distance,
            ageRange,
            interestedIn,
            skip: skip.current,
            limit: intLimit,
            isMobile: sessionStorage.getItem("isMobile")
          },
          updateQuery: (previousResult, { fetchMoreResult }) => {
            if (!fetchMoreResult) {
              hasMore.current = false;
              return previousResult;
            } else if (
              fetchMoreResult.searchProfiles.profiles.length < intLimit
            ) {
              hasMore.current = false;
            }
            const newData = produce(previousResult, (draftState) => {
              if (draftState.searchProfiles.profiles) {
                draftState.searchProfiles.profiles.push(
                  ...fetchMoreResult.searchProfiles.profiles
                );
              } else {
                draftState.searchProfiles.profiles =
                  fetchMoreResult.searchProfiles.profiles;
              }
            });

            return newData;
          }
        });
      }
    };

标签： reactjsapolloreact-apolloapollo-client

解决方案

好吧，根据您的解释，重新渲染是必要的，因为您在滚动时正在加载新内容，但是我们在这里关心的是不重新渲染整个页面......下面的提示可能会有所帮助。

  1. 将需要在滚动时获取数据的页面部分提取到单独的组件中，因为它将是唯一需要重新渲染的组件
  2. 包装您提取的组件，React.memo()以便在数据没有更改时不会重新渲染。
  3. 充分利用生命周期钩子方法，它们是管理在何处或如何重新渲染的工具

推荐阅读