Question

Application是一个React / Redux前端，其中包含使用Flask Python构建的API。

目标：我正在构建一个列表，而不是使用分页，我想做一个＆＃34;显示更多＆＃34;按钮。我们的想法是，在ComponentDidMount上，它从API获取第一组5个项目，然后当用户点击“＃34;显示更多＆＃34;它会出去填充接下来的5个项目，依此类推，直到用户清空了数据库，他们再也无法加载了。

问题：我完全不确定这是否是构建此功能的最佳实践方法。我目前没有看到任何明显的负面影响，但我认为最好先与专家联系。

鉴于这是很多人似乎都有的问题，我认为我会为其他人发布我的方法。

我是如何构建的：

Python中的API路径 描述：这从redux中的动作中获取参数。它使用＆＃34; offset＆＃34;这样它总能知道在数据库中从何处开始查询。它将返回的结果限制为5以保持负载下降。最后，我也将限制转换为参数。

@app.route("/api/items", methods=["GET"])
def get_items():
    offset = request.args['offset'];
    items = Item.query.order_by(Item.name).offset(offset).limit(5)
    items_serialized = []
    for item in items:
        items_serialized.append(item.serialize())
    if items:
        return jsonify(items=items_serialized)

来自我的React组件的功能 我的Component里面有一个列表，它接受listData并打印出所有列表项。我不会详细了解这个，但这就是我处理更多功能的方法。

偏移 - 使用listData.length来保留它。这样我就不必使用柜台了。
.Then（） - 由于我在actionCreators中使用了Axios Promise，我意识到我可以等待promise响应返回.then()并从那一点设置我的状态[这可以避免错误在哪里＆＃ 39; s null或待定......]。

然后我使用itemsList连接我的listData，并使用每个项目的id通过函数_uniqBy删除所有重复项。

componentDidMount() {
    this.updateListData()
  }

updateListData = () => {
    const offset = this.state.listData.length;
    this.props.fetchItems(offset).then(() => {
      this.setState(state => {
        const itemsList = _.uniqBy(state.listData.concat(this.props.itemsList), 'id')
        return { listData: itemsList }
      });
    });
  }

onLoadMore = () => {
    this.setState({
      loadingMore: true,
    });
    this.updateListData();
  };

行动和减少者： 以下是对所有使用人员的redux的工作原理的一般描述。

fetchItems通过传入的偏移参数对API进行GET。
Reducer将itemsList或错误返回到我的商店状态。

我还没有完全清理列表中的代码，我觉得我在输入方法时犯了一些错误，但希望有人可以从这里拿走一些东西，因为我真的很挣扎。另外，如果有人能告诉我这种方法是否合适呢？

使用Python构建LoadMore或显示更多并反复

0 个答案: