时间戳

首页 > 解决方案 > 从 API 获取所有数据后如何隐藏加载更多按钮？

reactjs - 从 API 获取所有数据后如何隐藏加载更多按钮？

问题描述

我有一个“加载更多”按钮，当所有数据都加载到屏幕上时，我想隐藏它。我不确定如何处理状态以在加载所有数据时使按钮消失，或者是否需要更改状态。我在这里附上了我的代码。你能检查我的代码并解决这个问题吗？

我的代码：

import React, { Component } from "react";
// import ReactDOM from "react-dom";
import { Link } from "react-router-dom";
import { Grid, Image, Icon, Segment, Card } from "semantic-ui-react";
class AllOffers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      visible: 20,
      isLoading: true,
    };
    this.loadMore = this.loadMore.bind(this);
  }
  loadMore() {
    this.setState((prev) => {
      return { visible: prev.visible + 16 };
    });
  }
  async componentDidMount() {
    const url = "https://localhost:3000/api/v4/web/list";
    const postBody = {
      store_id: 105,
    };

    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(postBody),
    };

    fetch(url, requestOptions)
      .then((response) => response.json())
      .then((json) => {
        this.setState({ data: json.stores });
      })
      .catch((error) => console.error(error))
      .finally(() => {
        this.setState({ isLoading: false });
      });
  }

  render() {
    console.log(this.state.data)
    return (
      <React.Fragment>
        <Grid className="znapoffer">
          <Grid.Column width={16}>
            <p className="znap-all">
              <span>Znap All Offers</span>
            </p>
          </Grid.Column>
        </Grid>
        <Grid columns={4} className="all-offers">
          {this.state.data.slice(0, this.state.visible).map((x, i) => {
            return (
              <Grid.Column key={i}>
                <Segment>
                  <Card>
                    <Link to={x.store_url}>
                      {" "}
                      <Image src={x.image} wrapped ui={false} />
                    </Link>
                    <Card.Content>
                      <Link to={x.store_url}>
                        {" "}
                        <Card.Header>{x.name}</Card.Header>
                      </Link>
                      <Card.Description>{x.store_summary}</Card.Description>
                    </Card.Content>
                    <Card.Content extra>
                      <p className="rewards">
                        <span>
                          <img src="/images/rewards.png" alt=""></img>
                        </span>
                        Cash rewards upto <span>AED {x.cashback}</span>
                      </p>
                      <p className="location">
                        <span>
                          <img src="/images/location.png" alt=""></img>
                        </span>
                        <span className="store-location" key="index">{x.store_branches}</span>
                        {/* {x.store_branches.map((locations, index) => (
                          <span className="store-location" key="index">
                            {index === 0 ? (
                              <span>{locations.store_location}</span>
                            ) : index >= 1 ? (
                              <span>
                                ,&nbsp;&nbsp;{locations.store_location}
                              </span>
                            ) : null}
                          </span>
                        ))} */}
                      </p>{" "}
                    </Card.Content>
                  </Card>
                </Segment>
              </Grid.Column>
            );
          })}
        </Grid>
        <Grid className="znapoffer">
          <Grid.Column width={16}>
            <p className="loading-offers">
              <span
                onClick={this.loadMore}
                className="btn btn-primary load-more"
                Style="cursor:pointer;">
                Loading more offers <Icon name="dropdown" />
              </span>
            </p>
          </Grid.Column>
        </Grid>
      </React.Fragment>
    );
  }
}
export default AllOffers;

标签： reactjs

解决方案

您可以比较lengthofvisible和 your data。

数据长度 > 可见 => 显示加载更多

数据长度<可见=>不显示加载更多

像这样：

{
   (this.state.data||[]).length > this.state.visible && (
      <Grid className="znapoffer">
         <Grid.Column width={16}>
            <p className="loading-offers">
               <span
                  onClick={this.loadMore}
                  className="btn btn-primary load-more"
                  Style="cursor:pointer;">
                  Loading more offers <Icon name="dropdown" />
               </span>
           </p>
         </Grid.Column>
       </Grid>
    )
}

推荐阅读