javascript - 在滚动上加载更多数据
问题描述
我有一个带有搜索输入的页面,一旦用户点击提交结果就会出现。
可能有很多结果(通常没有,但可能有数千个结果),我不想一次加载它们,当用户向下滚动时,如何获得几十个并从他的 API 获取更多结果,这样做的正确方法是什么?我在想 Lodash 油门可以适合,但我找不到一个很好的例子。
这是我的反应组件:
const getContacts = async (searchString) => {
const { data: contactsInfo} = await axios.get(`api/Contats/Search?contactNum=${searchString}`);
return contactsInfo;
};
export default class Home extends React.Component {
state = {
contactsInfo: [],
searchString: '',
};
handleSubmit = async () => {
const { searchString } = this.state;
const contactsInfo = await getContacts(searchString);
this.setState({ contactsInfo });
};
onInputChange = e => {
this.setState({
searchString: e.target.value,
});
};
onMouseMove = e => {
};
render() {
const { contactsInfo, searchString, } = this.state;
return (
<div css={bodyWrap} onMouseMove={e => this.onMouseMove(e)}>
<Header appName="VERIFY" user={user} />
{user.viewApp && (
<div css={innerWrap}>
<SearchInput
searchIcon
value={searchString || ''}
onChange={e => this.onInputChange(e)}
handleSubmit={this.handleSubmit}
/>
{contactsInfo.map(info => (
<SearchResultPanel
info={info}
isAdmin={user.isAdmin}
key={info.id}
/>
))}
</div>
)}
<Footer />
</div>
);
}
}
解决方案
如果 API 支持分页,那么您可以使用React-Infinite-Scroll。看起来像这样
<div style="height:700px;overflow:auto;">
<InfiniteScroll
pageStart={0}
loadMore={loadFunc}
hasMore={true || false}
loader={<div className="loader">Loading ...</div>}
useWindow={false}>
{items}
</InfiniteScroll>
</div>
但是,如果 REST API 不支持它,您仍然可以加载数据并将它们以块的形式显示给具有相同库的用户,但您需要自己处理当前的加载状态。
推荐阅读
- regex - .htaccess 如何删除文件扩展名和索引文件
- gitlab-ci - 在从 ECR 提取图像之前如何登录 AWS?
- amazon-web-services - AWS S3 同步创建具有不同于存储桶的权限的对象
- python - (Django)当我尝试将夹具文件加载到我的数据库中时,我不断收到字段冲突错误
- javascript - 全局功能不是最新浏览器中的功能 Microsoft Edge 和 Chrome
- excel - 在 Excel 中将单元格转换为字典
- arrays - 使用 JQ 将 JSON 展平/合并到单个对象数组中
- ios - Swift 5 禁用重定向到 WKWebView 中的其他应用程序
- importerror - ImportError:无法从“参数”导入名称“ranked_blast_output_schema”
- express - UnhandledPromiseRejectionWarning: MongoError: E11000 duplicate key error collection: db.footballers index: data_1 dup key: { data: null }