Файл с разделенными запятыми значениями (CSV) — это разделенный текстовый файл, в котором для разделения значений используется запятая. Каждая строка файла представляет собой запись данных. Каждая запись состоит из одного или нескольких полей, разделенных запятыми. Использование запятой в качестве разделителя полей является источником названия этого формата файла. Файл CSV обычно хранит табличные данные (числа и текст) в виде обычного текста, в этом случае каждая строка будет иметь одинаковое количество полей. Вики
В этой статье мы хотим прочитать CSV-файл в приложении react, и для этого мы используем пакет Papa Parse. Papa Parse — это самый быстрый браузерный парсер CSV (или разделенного текста) для JavaScript.
Давайте разберемся. Сначала мы должны установить пакет.

npm install papaparse

поскольку проект создан с использованием typescript, мы должны установить пакет typescript.

npm install @types/papaparse –-save-dev

Одна важная вещь о CSV-файлах в приложении react — CSV-файл должен быть скопирован в общий каталог.

Затем мы должны импортировать Papa Parse.

import Papa, { ParseResult } from "papaparse"

ParseResult — это тип papaparse для результата.
Затем мы определяем тип данных.

type Data = {
  name: string
  family: string
  email: string
  date: string
  job: string
}

type Values = {
  data: Data[]
}

После этого мы создаем состояние.

const [values, setValues] = React.useState<Values | undefined>()

и создаем функцию для получения csv-файла с помощью пакета Papa Parse.

const getCSV = () => {
    Papa.parse("/file.csv", {
      header: true,
      download: true,
      skipEmptyLines: true,
      delimiter: ",",
      complete: (results: ParseResult<Data>) => {
        setValues(results)
      },
    })
  }

и поместите ее в хук useEffect.

 React.useEffect(() => {
    getCSV()
  }, [])

Вот и все. Но для повторного использования и разделения проблем мы можем создать собственный хук.

вывод

Чтение и импорт CSV-файлов в приложение — непростая задача. В этой статье мы используем Papa Parse. Это отличный пакет для импорта, чтения и т.д…. CSV-файлов в js-приложениях. Более подробную информацию об этом пакете можно найти в блоге Papa Parse.