- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一个简单的民意调查应用程序,您可以在其中进行新的民意调查。
在“MyPolls”部分中,我希望它仅呈现我所做的前 5 个民意调查,而不是呈现整个民意调查列表。
底部是一个“加载更多”按钮,单击该按钮后,会加载另外 5 个民意调查,依此类推。
我一直在使用 Mongoose/MongoDB 后端,我的方法是使用 skip
和 limit
。
我已经成功实现了此功能,但问题是整个组件重新渲染,这对用户来说很烦人,因为您必须再次向下滚动并单击“加载更多”按钮。
这是我的应用程序:https://voting-app-drhectapus.herokuapp.com/
(为方便起见,您可以使用这些登录详细信息:用户名:riverfish@gmail.com
密码:123
)
然后转到我的投票
页面。
MyPoll.js:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
class MyPolls extends Component {
constructor(props) {
super(props);
this.state = {
skip: 0
};
}
componentDidMount() {
this.props.fetchMyPolls(this.state.skip);
this.setState({ skip: this.state.skip + 5 });
}
sumVotes(polls) {
return polls.reduce((a, b) => {
return a.votes + b.votes;
});
}
loadMore(skip) {
this.props.fetchMyPolls(skip);
const nextSkip = this.state.skip + 5;
this.setState({ skip: nextSkip });
}
renderPolls() {
return this.props.polls.map(poll => {
return (
<div className='card' key={poll._id}>
<div className='card-content'>
<span className='card-title'>{poll.title}</span>
<p>Votes: {this.sumVotes(poll.options)}</p>
</div>
</div>
)
})
}
render() {
console.log('polls', this.props.polls);
console.log('skip:', this.state.skip);
return (
<div>
<h2>My Polls</h2>
{this.renderPolls()}
<a href='#' onClick={() => this.loadMore(this.state.skip)}>Load More</a>
</div>
);
}
}
function mapStateToProps({ polls }) {
return { polls }
}
export default connect(mapStateToProps, actions)(MyPolls);
Action 创建者:
export const fetchMyPolls = (skip) => async dispatch => {
const res = await axios.get(`/api/mypolls/${skip}`);
dispatch({ type: FETCH_MY_POLLS, payload: res.data });
}
投票路线:
app.get('/api/mypolls/:skip', requireLogin, (req, res) => {
console.log(req.params.skip);
Poll.find({ _user: req.user.id })
.sort({ dateCreated: -1 })
.skip(parseInt(req.params.skip))
.limit(5)
.then(polls => {
res.send(polls);
});
});
整个 github 存储库:https://github.com/drhectapus/voting-app
我知道实现此功能的方法可能是最好的解决方案,因此我愿意接受任何建议。
最佳答案
看起来重新渲染是由于单击“加载更多”链接实际上导致 react 路由器导航到新路线而触发的,从而导致整个 MyPolls
要重新渲染的组件。
只需替换 <a href='#' onClick={...}>
与 <button onClick={...}>
.
如果您不想使用 button
,您还可以更改 onClick
函数为
const onLoadMoreClick = e => {
e.preventDefault(); // this prevents the navigation normally occuring with an <a> element
this.loadMore(this.state.skip);
}
关于node.js - 如何在 React/Node 中创建 'Load More' 功能而不重新渲染整个组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47322870/
我是一名优秀的程序员,十分优秀!