Question

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

我正在打电话给减速机（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}
        />
    );
})}

到目前为止非常简单。但是，在列表的末尾，我需要有一个“加载更多”按钮才能加载列表的下10个项目。我想方法是：

handleLoadMore() {
    this.setState(prevState => ({    
        pageSize: prevState.pageSize + 10
    }));
    this.props.getListing(this.state.pageSize);
}

现在打算列出20，而不是10。以此类推（例如30、40，以10为增量）。

但是，这不起作用，因为触发handleLoadMore()后，整个列表都会重新呈现。通常的'load more'行为会将初始结果UI保留在屏幕上，只是追加了下X个结果。

如何在不重新渲染整个列表的情况下实现此效果？我是否应该拥有从商店退回的商品的本地状态副本？

Answer 1

请勿在本地状态下设置任何内容。只需致电this.props.getListing。

在您的redux reducer / thunk / saga操作中，当其成功调度时，而不是替换this.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
     }
}

如何与redux配合使用以实现“更多加载”功能？

1 个答案: