Передача данных API через реагирует CSV

Question

Я использую реагировать 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);

Answer 1

Код Песочница (по вашему) с решением: https://codesandbox.io/s/81v8p8kmy9

В вашем коде много плохого "React Styling", но по вопросу:

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 добавляется в состояния.

Надеюсь, они будут полезны.