React — csv не видит мой массив?

Question

[sharkdest]

Здравствуйте, помогите, пожалуйста, решить проблему:

Вот мой код:

import React from "react";
import axios from 'axios';
import { CSVLink } from "react-csv";

export default class Bookkeepings extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
     rows: []
  }
componentDidMount () {
      axios.get(API+"referenceData", {
      })
      .then(res => {
         this.setState({
            rows: res.data
         })
         console.log(rows);
       })
 }
 render () {
 const { rows } =this.state
  return (
   <div className="container">
          <CSVLink
            data={rows}
            separator={";"}
            filename={"my-file.csv"}
            className="btn btn-primary"
            target="_blank"
            >
            Download me
          </CSVLink>)
 }
}

Console:

(3) [{…}, {…}, {…}]
 0: {ownerKey: "test_owner", accountNumber: "54325672098734"}
 1: {ownerKey: "test_owner", accountNumber: "82039564645380"}
 2: {ownerKey: "test_owner2", accountNumber: "92637479276455"}
 length: 3
 __proto__: Array(0)

В таком случае после скачивания файла получаю пустой CSV

Если в Render впишу:

const rows = [
      { firstname: 'Ahmed', lastname: 9, email: '[e-mail]' }
    ];

то в CSV файле присутвстуют данные с const rows

Заранее большое спасибо.

Comments

[Даша Циклаури]

залогируй что в rows перед return

[sharkdest]

Console.log выдал точно такое же значение как и в componentDidMount

Answer 1

[0xD34F]

Добавьте key вашему CSVLink. Такой, чтобы зависел от содержимого rows.

Comments

[sharkdest]

Изменил CSVLink так:

{ rows.map(row =>
              <CSVLink
                className="btn btn-secondary btn-download"
                data={rows}
                separator={";"}
                filename={"my-file.csv"}
                key={row.accountNumber}
                >
                <span class="oi oi-data-transfer-download"></span>
              </CSVLink>
            )}

Помогло, спасибо!