javascript - 如何使 SectionList 仅在拉动刷新时显示刷新指示器

Question

我有一个SectionList我想做拉刷新的地方。我也有一个DataContext提供：

• fetching: boolean, 表示正在获取某物的状态
• fetchedData: Data[], 包含从 fetch 中存储的数据的状态
• fetchData: () => Promise<void>获取数据并将其存储在本地的函数。它将fetching状态更新true为false
• 有一个被触发并在is时从数据库useEffect执行读取setFetchedDatafetchingfalse
• 有一个useEffectPolling它是一个自定义包装器，它提供类似可取消的东西setInterval，如果它已经处于活动状态，它可以取消一个承诺。它基本上fetchData每分钟运行一次。

我的SectionList样子

<SectionList
  refreshControl={
    <RefreshControl
      refreshing={fetching}
      onRefresh={fetchData}
    />
  }
</SectionList>

发生的事情是刷新图标每分钟出现一次（这是我的代码所期望的）。但是，我想要的是在后台更新时以某种方式不显示它。但是，如果我拉动刷新，仍然会显示它。

的代码DataContext类似于以下内容：为简洁起见，我跳过了一些清理代码并创建了一些可取消的承诺

export function DataContextProvider({children}) {
  const [fetching, setFetching] = useState<boolean>(true);
  const [fetchedData, setFetchedData] = useState<Data[]>([]);
  useEffect(()=>{
    (async () => {
      // fetch remote and store to local db
      await service.fetchAndStore()
      setFetching(false);
    })()
  }, []);

  useEffect(()=>{
    if (fetching) {
      console.log("still fetching don't do anything")
      return () => {}
    }
    const cancelablePromise = cancelable(async () => {
      // updates the state with the stored data
      setFetchedData(await service.getStoredData());
    })());
    return () => cancelablePromise.cancel();
  }, [fetching]);

  const fetchData = async () => {
    setFetching(true)
    await service.fetchAndStore()
    setFetching(false)
  }
  // This is a wrapper that executes something every few seconds something like
  // a smarter setInterval.  I don't think it is relevant to the question.
  useEffectPolling(fetchData, 60000);

  return <DataContext.Provider value={{
    fetching,
    fetchData,
    fetchedData,
  }}>
    {children}
  </DataContext.Provider>
}

我的猜测，虽然我不确定调用第二个状态backgroundFetch并将其用作内部状态是否是个好主意。但我担心重新渲染的性能。

标签： javascriptreactjstypescriptreact-native