Node.js 如何创建'；加载更多'；功能，而不在React/Node中重新渲染整个组件？

我正在尝试创建一个简单的民意调查应用程序，您可以在其中进行新的民意调查

在“MyPolls”部分中，我希望它仅呈现我所做的前5次轮询，而不是呈现整个轮询列表

底部是一个“加载更多”按钮，单击该按钮，将加载另外5个轮询，以此类推

我一直在使用Mongoose/MongoDB后端，我的方法是使用

skip

和

limit

我已经设法实现了这个功能，但问题是整个组件都重新渲染了，这对用户来说很烦人，因为您必须再次向下滚动并单击“加载更多”按钮

这是我的应用程序：

（为了方便起见，您可以使用以下登录详细信息： 用户名：

riverfish@gmail.com

密码：

123

）

然后转到

My Polls

页面

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);

投票路线：

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回购：

---

我知道实现此功能的方法可能是最好的解决方案，因此我愿意接受任何建议。

看起来重新渲染是由以下事实触发的：单击“加载更多”链接实际上会导致react router导航到新路由，导致整个

MyPolls

组件重新渲染

只需将

替换为

如果不想使用

按钮

，也可以将

onClick

功能更改为

const onLoadMoreClick = e => {
    e.preventDefault(); // this prevents the navigation normally occuring with an <a> element
    this.loadMore(this.state.skip);
}

const onLoadMoreClick=e=>{
e、 preventDefault（）；//这可以防止通常使用元素进行导航
this.loadMore（this.state.skip）；
}

这是一个很好的答案。我试过了。我重新创建了类似但简化的用例，并在没有

preventdavault（）

的情况下首次尝试了它，它的工作方式与您在herokuapp上的情况类似。然后我添加了

preventDefault（）

，它就像一个符咒：）

MyPolls

组件在更新

loadMore

方法中的状态时重新呈现，这是所需的行为，因为这样它会显示更多的轮询。不希望出现由于url更改而出现的向上滚动。@forrert的答案是正确的：）