时间戳

首页 > 解决方案 > 通过 react csv 传递 api 数据

javascript - 通过 react csv 传递 api 数据

问题描述

我正在使用 react csv 来生成 excel 文件。

我下载了一个示例数据，但要下载 JSON 数据，我不确定如何将 JSON 文件从RecipeReviewCardList一个文件传递到另一个tab-demo.js文件。

您能告诉我如何传递提供我的代码更改和沙箱的数据吗？

这将有助于我了解更多信息并在将来自行解决问题。 https://codesandbox.io/s/ko1q2x233

标签-demo.js

<div>
    230 sports | test Export Excel | Export PDF
    <CSVLink data={csvData}>Download me</CSVLink>;
    <CSVDownload data={csvData} target="_blank" />;
</div>

RecipeReviewCardList.js

 getCommentsData() {
    let comments = [];
    fetch("https://jsonplaceholder.typicode.com/comments")
      .then(response => response.json())
      .then(json => {
        comments = json;
        // comments = comments.slice(0,3);
        this.setState({ comments: comments });
        this.setState({ activeComments: comments.slice(0, 10) });
        //console.log(comments);

标签： javascripthtmljsonreactjsredux

解决方案

带有解决方案的代码沙箱（基于您的）：https ://codesandbox.io/s/81v8p8kmy9

在您的代码中“反应样式”非常糟糕，但根据问题：

div部分从tab-demo.js移动到RecipeReviewCardList.js

    return this.state.comments.length > 0 ? (
      <div>
        <div>
          230 sports | test Export Excel | Export PDF
          <CSVLink data={this.state.csv}>Download me</CSVLink>;
          <CSVDownload data={this.state.csv} target="_blank" />;
        </div>
        {listView}
        <br />
        ...

函数getCommentsData现在看起来像这样：

  getCommentsData() {
    let comments = [];
    let csv = [];
    let csvTitle = ["postId", "id", "name", "email", "body"];

    fetch("https://jsonplaceholder.typicode.com/comments")
      .then(response => response.json())
      .then(json => {
        csv = json.map(item => [
          item.postId,
          item.id,
          item.name,
          item.email,
          item.body
        ]);
        csv.unshift(csvTitle);

        comments = json;
        this.setState({ csv, comments, activeComments: comments.slice(0, 10) });
      });
  }

而且，当然，csv被添加到状态中。

我希望这些会有所帮助。

推荐阅读