0

我有一张从 Api 获得的卡片列表。卡片是用户在上一个选项卡上选择的产品。当用户向下滚动页面时，它们应该被加载。一切正常。但是如果用户滚动到最后并更新页面表情卡就会出现。

因此，我有一个主要组件，它从本地存储（用户选择的产品）中获取密钥并将密钥逐个发送到另一个组件。这个组件检查，如果有这个key的卡是可见的，通过这个key向Api发出请求。如果我滚动到最后并更新页面，我会看到空卡片。此外，在网络中，我看到 Api 请求仅针对前四张卡。但不是最后四个。

这是主要组件，将密钥发送到另一个组件。

常量 productsKeys = JSON.parse(localStorage.getItem(storageKey) ?? "[]");

const posts = productsKeys.map((key, index) => {
  return <MyListPosts key={key} productsKey={key} index={index} />;
});

这是另一个发送 Api 请求的组件

class MyListPosts extends Component {
  viewStateChange = (InView) => {
    if (InView) {
      //if the card is visible, the key is transfered to the async request
      this.props.productsInList(this.props.productsKey);
    }
  };
  render() {
    const { productsKey, classes, index, productsInMyList, skeletonLoading } =
      this.props;

    const products = productsInMyList[index] ?? productsInMyList;

    return (
      <InView onChange={this.viewStateChange}>
        <div>
          <Card component="nav" className={classes.myListCard}>
            {skeletonLoading ? (
              <SkeletonInList />
            ) : (
              <>
                <Typography>{products.name}</Typography>
                <Typography>{products.price} price</Typography>
                <Button onClick={() => this.deleteItem(products.key)}>
                  Done
                </Button>
              </>
            )}
          </Card>
        </div>
      </InView>
    );
  }
}
4

0 回答 0