当从 React js 中的第一个 API 调用加载所有内容（延迟加载）时进行第二个 API 调用

Question

我有一些 .json 文件。我需要在浏览器中显示第一个 .json 文件的所有数据，因为懒惰 loading.I 需要 API 调用第二个 .json 当所有内容都从加载时第一个 .json 文件 （当用户滚动到页面末尾时）。我不应该一次拨打所有 API 电话。如何使用 React js 做到这一点。

Answer 1

React.js 只是带有 JSX 风格的普通 javascript。您必须在您的容器上添加事件滚动，并触发一个方法在滚动到达终点时对您的 API 进行 GET 调用，就像在 React 外部一样。

Answer 2

利用 javascript scroll eventListener 并计算 window 滚动高度以触发异步调用。

请在构造函数中绑定必要的方法并分别定义状态。这是代码

componentDidMount(){
  if(this.state.newData.length === 0){
    window.addEventListener('scroll', this.handleOnScroll);
    this.doQuery(1).then(res=>
      this.setState({
       newData: this.state.newData.slice().concat(res),
      requestSent: false
    }))
  }
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.handleOnScroll);
}

handleOnScroll(){
  var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
  var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
  var clientHeight = document.documentElement.clientHeight || window.innerHeight;
  var scrolledToBottom = Math.ceil(scrollTop + clientHeight) >= scrollHeight;
  if (scrolledToBottom) {
    this.setState({
      scrollCounter: this.state.scrollCounter + Math.floor(scrolledToBottom)
    },()=>{
            if(this.state.scrollCounter<4){
      this.doQuery(this.state.scrollCounter).then(res=>
      (res===BUSY)
        ? false
        : this.setState({
            newData: this.state.newData.slice().concat(res)
          })
        )
        .catch(err=>this.setState({requestSent: false}))
        this.setState({requestSent: true});
    }else{
      return true
    }
 })
  }
}

当从 React js 中的第一个 API 调用加载所有内容（延迟加载）时进行第二个 API 调用

Make 2nd API calls when all contents are loaded (lazy loading) from the first API call in React js

lazy-loading

npm

reactjs

npm-lazy