Question

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

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

您能否告诉我如何在下面提供我的代码更改和沙箱的情况下传递数据？

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

tab-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);

Answer 1

代码沙箱（基于您的代码）以及解决方案：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 添加到州。

我希望这些会有所帮助。

通过react csv传递api数据

1 个答案: