javascript - React 中与子组件的交叉观察器

Question

我正在尝试使用交叉观察器来实现无限滚动。我有一个在子组件中呈现的数据列表。

我在渲染时将目标元素附加到列表元素的最后一个。

问题是，在两次API调用之后，它没有触发，因为我在App.js函数handleObserver中有一个条件

if (this.state.prevY > y) {

因此，在第二次 API 调用之后，它没有发生，条件为 false。显然，API 调用再也不会发生。

上一个越来越大。

如何解决此问题，每篇文章都显示在父级组件中。我正在尝试使用子组件来实现。

App.js

import React, { Component } from 'react';
import Child from './Child';
import axios from 'axios';

class App extends Component {
  state = {
    users: [],
    page: 0,
    loading: false,
    prevY: 0,
    isDataAvailable: false
  };

  componentDidMount(){
    this.getUsers(this.state.page)
  }


  getUsers = (page = this.state.page) => {
    this.setState({ loading: true });
    axios
      .get(`https://api.github.com/users?since=${page}&per_page=100`)
      .then(res => {
        this.setState({ users: [...this.state.users, ...res.data] });
        this.setState({ loading: false, isDataAvailable: true });
      });
  }

  handleObserver = (entities, observer) => {
    const y = entities[0].boundingClientRect.y;
    if (this.state.prevY > y) {
      const lastUser = this.state.users[this.state.users.length - 1];
      const curPage = lastUser.id;
      this.getUsers(curPage);
      this.setState({ page: curPage });
    }
    this.setState({ prevY: y });
  }

  render() {
    return (
      <div className="container">
        <div style={{ minHeight: '800px' }}>
          {this.state.isDataAvailable ? (
            <Child
              handleObserver={this.handleObserver}
              users={this.state.users}
            />
          ) : null}
         
        </div>
      </div>
    );
  }
}

export default App;



// Child.js
import React, { Component } from 'react';

class Child extends Component {
  componentDidMount() {
    const options = {
      root: null,
      threshold: 0,
    };
    this.observer = new IntersectionObserver(
      this._handleObserver.bind(this),
      options,
    );
    this.observer.observe(this.loadingRef);
  }

  shouldComponentUpdate(nextProps) {
    return this.props.users !== nextProps.users;
  }

  _handleObserver(entities, observer) {
    this.props.handleObserver(entities)
  }

  render() {
    return (
      <ul>
        {this.props.users.map(
          (user, index) =>
            (index ===
              this.props.users.length - 1 ? (
                <div>
                  <div ref={loadingRef => (this.loadingRef = loadingRef)} />
                  <li key={user.id}>{user.login}</li>
                </div>
              ) : (
                <li key={user.id}>{user.login}</li>
              )),
        )}
      </ul>
    );
  }
}

export default Child;

Answer 1

所以问题是每次loadingRef改变的时候，所以我们每次都需要指出ref。

componentDidUpdate(){
 this.observer.observe(this.loadingRef)
}

最初，loadingRef 将指向第 99 个元素，稍后将指向第 199 个元素。所以我们需要更新loadingRef的指向。

通过在子组件中添加上述代码，我能够解决该问题。