Javascript 如何实现'；加载更多'；react with redux中的功能？

这是在我们的页面中显示列表的当前流程：

我正在调用一个action reducer（

getListing（）

），通过

mapDispatchToProps

class Listing extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pageSize: 10
        };

        this.props.getlisting(10);
    }

参数“10”只是确定要显示多少项。因此，这将返回一个包含10个项目的列表，然后在列表的

render（）

方法中呈现：

listings.map(listing => {
    return (
        <ListingCard
            key={listing.id}
            listing={listing}
        />
    );
})}

目的是现在得到20份而不是10份的清单。以此类推（例如，30、40、10的增量）

但是，这不起作用，因为在触发

handleLoadMore（）

时，整个列表将重新呈现。通常的

“加载更多”

行为将初始结果UI保留在屏幕上，只是在某种程度上追加下一个X个结果

---

如何在不重新呈现整个列表的情况下实现此效果？我是否应该拥有从商店返回的物品的本地州副本？

不要在本地州设置任何内容。只需调用

this.props.getListing

在redux reducer/thunk/saga操作中，当它成功分派时，不要替换

此.props.listings

，而是添加到它：

const initialState = {
  pageSize: 0,
  listings: []
}
​
function myApp(state, action) {
  if (typeof state === 'undefined') {
    return initialState
  }

  switch (action.type) {
     case FETCH_LISTINGS_SUCCESS:
          return {
            ..state,
            pageSize: state.pageSize + 10,
            listings: [...listings, ...action.listings]
          });
        default:
          return state
     }
}

---

不要在本地设置任何内容。只需调用

this.props.getListing

在redux reducer/thunk/saga操作中，当它成功分派时，不要替换

此.props.listings

，而是添加到它：

const initialState = {
  pageSize: 0,
  listings: []
}
​
function myApp(state, action) {
  if (typeof state === 'undefined') {
    return initialState
  }

  switch (action.type) {
     case FETCH_LISTINGS_SUCCESS:
          return {
            ..state,
            pageSize: state.pageSize + 10,
            listings: [...listings, ...action.listings]
          });
        default:
          return state
     }
}

---

列表卡是功能组件还是反应组件？如果是React.组件，您可以比较旧道具和新道具，然后决定是否重新渲染。否则每次都会重新渲染。@Tan ListingCard是react类组件。请尝试使用react.PureComponent而不是react.component。如果这没有帮助，请检查此Url以获取有关shouldcomponentupdate的更多信息。ListingCard是功能组件还是React.component？如果是React.组件，您可以比较旧道具和新道具，然后决定是否重新渲染。否则每次都会重新渲染。@Tan ListingCard是react类组件。请尝试使用react.PureComponent而不是react.component。如果这无助于检查此Url以获取有关shouldcomponentupdate的更多信息，我还意识到“重新加载ui”的原因是我的加载组件条件。我还意识到“重新加载ui”的原因是我的加载组件条件。