时间戳

首页 > 解决方案 > 确定用户是否滚动到底部不使用反应

javascript - 确定用户是否滚动到底部不使用反应

问题描述

当用户滚动到底部时，我正在关注此博客以加载更多数据，但这似乎没有发生。

https://blog.logrocket.com/infinite-scroll-techniques-in-react-adcfd7ff32bd/

这是我使用的代码，但这似乎没有发生。我没有看到任何与加载更多工作相关的调试器或控制台日志。

class MyOrders extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loader: true,
      data: "",
      page: 1,
    };
  }
  componentDidMount() {
    // Detect when scrolled to bottom.
    console.log("this.ref", this.refs.myscroll);
    this.refs.myscroll.addEventListener("scroll", () => {
      console.log("working");
      if (
        this.refs.myscroll.scrollTop + this.refs.myscroll.clientHeight >=
        this.refs.myscroll.scrollHeight
      ) {
        this.loadMore();
      }
    });
    this.getMyOrders();
  }
  loadMore = () => {
    debugger;
    this.setState(
      {
        page: this.state.page + 1,
      },
      () => {
        console.log("page", this.state.page);
      }
    );
  };
  render() {
    const { data } = this.state;
    let results = data && data.data && data.data.results;

    return (
      <MainDiv >
        <Header color="#436ab2" backPage="/dashboard" headerText={'My Orders'} title="Working" />
        <Body ref="myscroll">
          <HeaderDiv>Your Orders</HeaderDiv>
          {results &&
            results.map(item => {
              let template_color = item && item.offer && item.offer.template_color

              return (
                <CardMainDiv color={template_color}>
                  <FirstDiv>
                    <LogoDiv>
                      {/*<img src={item && item.offer && item.offer.logo} />*/}

                      <Logo src={item && item.offer && item.offer.logo} />
                    </LogoDiv>
                    <DateDiv>
                      <OrderDate>Order Date</OrderDate>
                      <OrderDateValue>{modifyDate(item.created_at)}</OrderDateValue>
                    </DateDiv>
                  </FirstDiv>
                  <SecondDiv>{item && item.offer && item.offer.offer_summary}</SecondDiv>
                  <ThirdDiv>
                    <PaymentDiv>
                      <Paid>Amount Paid</Paid>
                      <Amount>₹{item && item.total_amount}</Amount>
                    </PaymentDiv>
                    <ViewDetailsDiv onClick={() => this.handleMyOffers(item.offer_transaction_id)}>
                      <DetailsDiv>VIEW DETAILS</DetailsDiv>
                    </ViewDetailsDiv>
                  </ThirdDiv>
                </CardMainDiv>
              )
            })}
        </Body>
        {this.state.loader && <OverlayLoader />}
      </MainDiv>
    );
  }
}

标签： javascriptreactjs

解决方案

在将 ref 传递给子组件时尝试使用react forwardref ，例如：

const Child = React.forwardRef((props, ref) => (<div ref={ref}>something here</div>))

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {

    return (
      <div>
        <Child ref={this.myRef} />
        ...
      </div>
    );
  }
}

推荐阅读