Как ждать возврата CSV и разрешить обещание в ReactJs? - PullRequest
0 голосов
/ 26 апреля 2020

В настоящее время fetchData() передает обратно CSV-блоками (всего 3500 элементов), поэтому я использовал .then, чтобы дождаться его завершения, чтобы передать его в функцию papaparse. Тем не менее, в моей консоли я вижу, что он перемещается на getArtist, прежде чем обещание будет выполнено. Таким образом, массив, переданный обратно объекту, является только частью файла CSV, а не целым.

import React from 'react';
import Papa from 'papaparse';

export default function GetData(artist) {
    const object = fetchCsv().then(object => Papa.parse(object));
    console.log(object);
    const tateArtist = getArtist(artist, object);
    console.log(tateArtist);
    return tateArtist;
}

async function fetchCsv() {
    const response = await fetch('data/artist_data.csv');
    const reader = response.body.getReader();
    const result = await reader.read();
    const decoder = new TextDecoder('utf-8');
    const csv = await decoder.decode(result.value);
    return csv;
}

async function getArtist(artist, data){
   const artistName = artist.split(" ");
   var artistData = "Error";
   for(const item of data.data){
      if(item[1].includes(artistName[0]) && item[1].includes(artistName[artistName.length-1])){
         return item;
      }
   }
    return artistData;
}

Я попытался обернуть строку, используя useEffect, но вместо этого получил ошибку о неправильном использовании.

export default function GetData(artist) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchCsv().then(object => Papa.parse(object)).then(response => setData(response));
  }, [])

1 Ответ

0 голосов
/ 26 апреля 2020

В конце концов, я преобразовал файл CSV в JSON, так что это облегчит мою жизнь при чтении объектов с объекта. Плюс меньше строк кода.

import React from 'react';
import artistData from './data/artist_data.json';

export default function getData(artist) {
    const tateArtist = getArtist(artist, artistData);
    return tateArtist;
}

async function getArtist(artist, artistData){
   const artistName = artist.split(" ");
   var tateArtist = "Error";
   artistData.some(function(data){
      var name = data.name;
      if(name.includes(artistName[0]) && name.includes(artistName[artistName.length-1])){
         tateArtist =  data;
         return;
      }
   })
    return tateArtist;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...