React Native FlatList - 当isLoading不呈现页脚时

Question

到达列表末尾时，我的 react native flatlist 出现问题。

我需要的行为是典型的：到达结束时获取数据库，在操作期间在页脚处显示加载指示器。

问题是，由于某些原因，没有显示加载指示器。

这是我的 FlatList 组件：

    ...

    const renderFooter = () => {
        if (!props.isLoading) return null;

        return (
          <View style={{ paddingVertical: 35 }}>
             <Loading type="ios" size={30} color={colors.primary} />
          </View>
        );
    };

    return (
      <FlatList
        ref={ref}
        data={data}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
        windowSize={5}
        maxToRenderPerBatch={5}
        updateCellsBatchingPeriod={50}
        removeClippedSubviews={false}
        initialNumToRender={initialNumToRender}
        ListFooterComponent={renderFooter}
        ListEmptyComponent={ListEmptyComponent}
        onEndReached={onEndReached}
        onEndReachedThreshold={0.5}
        showsVerticalScrollIndicator={false}
        style={{ flexGrow: 1 }}
        contentContainerStyle={{ flexGrow: 1 }}
      />
    );

这就是我获取数据库的方式：

const [items, setItems] = useState([]);
const [isGettingMoreOldItems, setIsGettingMoreOldItems] = useState(true);

const fetchItems = async (old = true) => {
   ...
   const newItems = await db.getItems();
   setItems(old ? [...items, ...newItems] : [...newItems, ...items]);
   ...
}

const getMoreOldItems = async () => {
   setIsGettingMoreOldItems(true);
   await fetchItems(); // <--------- I AM AWAITING!
   setIsGettingMoreOldItems(false);
}

 ...

return <MyList ... isLoading={isGettingMoreOldItems} onEndReached={getMoreOldItems} ... />

为什么当到达列表末尾并且应用程序开始获取数据库时，我没有看到加载指示器？我该如何解决这个问题？

注意：获取操作持续 2 秒（大约）

好奇心

如果我这样做：

const getMoreOldItems = async () => {
   setIsGettingMoreOldItems(true);
   await fetchItems(); // <--------- I AM AWAITING!

   setTimeout(() => {
      setIsGettingMoreOldItems(false);
   }, 1000);
}

我可以看到页脚。但似乎有点棘手，不清楚...

Answer 1

首先是里面的代码：

const getMoreOldItems = async () => {
   setIsGettingMoreOldItems(true);
   await fetchItems(); // <--------- I AM AWAITING!
   setIsGettingMoreOldItems(false);
}

应该是这样的：

const getMoreOldItems = async () => {
   await setIsGettingMoreOldItems(true);
   await fetchItems(); // <--------- I AM AWAITING!
   await setIsGettingMoreOldItems(false);
}

第二件事，请永远记住所有 JS 都是异步 D:.

如果上述方法不起作用，也可以使用匿名函数：

(async () => {
await setIsGettingMoreOldItems(true);
await fetchItems(); // <--------- I AM AWAITING!
await setIsGettingMoreOldItems(false);
})();

更新：

await 仅在您将其与 Promise 一起使用时才有用，但 requests（在您的情况下为 fetch）不会返回 Promise。它根本没有 return 语句，所以它隐式返回 undefined。

因此，只需在每次提取后执行以下操作：

let data = await response.json(); // or similar upon your needs - blob, etc

在你的情况下，它会是这样的：

let data = await newItems.json();