Я делаю приложение для реагирования, которое извлекает и отображает некоторые данные файла CSV из общей папки. Мой реагирующий контейнер выглядит так:
import React, { Component } from 'react'
import * as Chart from "chart.js";
import { connect } from 'react-redux'
import { Bar } from 'react-chartjs-2'
import * as actions from "../actions"
import * as Papa from 'papaparse'
function mapStateToProps({stats}) {
return {
data: stats.data
}
}
class Stats extends Component {
fetchCsv(fileName) {
return fetch(fileName).then(function (response) {
let reader = response.body.getReader();
let decoder = new TextDecoder('utf-8');
return reader.read().then(function (result) {
return decoder.decode(result.value);
});
});
}
constructor(props){
super(props);
}
async componentDidMount() {
let PlayerArray = [], BallByBallArray = [], MatchArray = [],
PlayerMatchArray = [], SeasonArray = [], TeamArray = [];
let PlayerMatchData = await this.fetchCsv("Player_Match.csv");
Papa.parse(PlayerMatchData, {
complete: function(results) {
console.info("Finished:", results.data);
PlayerMatchArray = results.data;
console.info("entries.length: " + results.data.length);
}
});
}
render() {
return (
<div>
</div>
)
}
}
export default connect(
mapStateToProps, actions
)(Stats)
Это выборка содержимого файла Player_Match.csv с использованием функции fetchCsv асинхронно и сохранение его в переменной PlayerMatchData.
Затем PlayerMatchData анализируется papaparse. Проблема в том, что в нем файл имеет 12700 записей, а в google chrome только выборка 3776 записей.
Кроме того, как ни странно, он получает 1660 записей в firefox
Любой вклад будет оценен. :)
Редактировать: Ссылка на данные: https://www.kaggle.com/harsha547/indian-premier-league-csv-dataset#Player_Match.csv
Он имеет 12700 строк по 5 столбцов. Но он показывает только 3776 строк по 5 столбцов в каждой. Я также прилагаю ссылку на данные в вопросе.
PlayerMatchData — это строка. В нем нет строк и столбцов. Вы можете разбить его построчно на массив строк, и вы либо получите ожидаемое количество строк 12700, либо нет. Если да, то проблема действительно где-то внутри Papa.parse. Если нет, то проблема в fetchCsvДа, в PlayerMatchData нет всех данных. Я не могу понять, почему.
Потому что reader.read() считывает из потока по одной порции за раз. developer.mozilla.org/en-US/docs/Web/API/Streams_API/…
Да, это должно быть проблемой. подскажите как исправить...



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Итак, я получил ответ. Как сказал @SergiuParaschiv reader.read() читает только один блок данных. Поэтому вместо этого я использовал функцию fetch для выполнения задачи. В разборе проблем не было.
await fetch("Player_Match.csv")
.then(response => response.text())
.then(text => {
PlayerMatchData = text;
// console.info(text)
})
Это сделает задачу.
Будет ли
PlayerMatchDataиметь 12700 элементов, если разделить его на\n?