Flask + React：在 Flask api 中加载大量数据并将其显示在 React 应用程序中

Question

我是烧瓶和反应的新手。我正在尝试使用 pandas 在 python 中加载大量数据。加载后，我想将其发送到前端（位于 React 中）并显示它。由于数据非常大，我尝试使用延迟加载将数据发送到客户端。

后端

@app.route("/lazy/")
def lazy():
    return Response(lazy_load())


def lazy_load():
    for i in range(0, df.shape[0], 1000):
        yield df.iloc[i: i + 1000, :].to_json()

前端

class App extends React.Component {

  mySubmitHandler = (event) => {
    event.preventDefault();
    axios
      .post("http://127.0.0.1:5000/", 'request data')
      .then(function (res) {
        console.log(res);
      });
  };

  render() {
    return (<div>
      <form onSubmit={this.mySubmitHandler}>
        <button type="submit">Submit</button>
      </form>    
    </div>
    );

  }
}

如您所见，我的 api 以 json 的形式发送 1000 行的块。 现在我想显示这些块并将新行附加到现有表中，这样看起来就像是延迟加载并且不会减慢浏览器速度。

Answer 1

1. 使用状态库，如 Redux 或 MobX。
2. 使用虚拟化来防止浏览器延迟。如果您想显示一个巨大的表格（1000+行），请使用如下所示的内容：https://bvaughn.github.io/react-virtualized/#/components/List

或者，使用分页将大量数据分成更小的块 Material UI 提供分页表