Передача данных api через реагировать csv

Я использую 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.info(comments);

javascript html json reactjs redux

15.11.2018 21:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 108

Ответы 1

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

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

Раздел 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.

Я надеюсь, что это будет полезно.

16.11.2018 13:04