我有一些 .json 文件。我需要将浏览器中第一个 .json 文件中的所有数据显示为延迟加载。当所有内容从第一个 .json 文件加载时（当用户滚动到页面末尾时），我需要对第二个 .json 进行 API 调用)。我不应该一次调用所有 API。如何使用 react js 做到这一点。
当所有内容从 React js 中的第一个 API 调用加载（延迟加载）时进行第二个 API 调用
IT技术
reactjs
npm
lazy-loading
npm-lazy
2021-05-20 02:00:28
2个回答
利用 javascript scrolleventListener 并计算窗口滚动高度以触发异步调用。
请在构造函数中绑定必要的方法并分别定义状态。这是代码
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 只是带有 JSX 风格的普通 javascript。您必须在容器上添加事件滚动，并在滚动到达与 React 外部完全相同的结尾时触发一个方法来对 API 进行 GET 调用。