Как решить проблему импорта csv файла в реакт приложение с помощью библиотеки papapase, кириллица выводится в виде иероглифов?

Проблема с импортом CSV файла с кириллицей в реакт приложение и отображением кириллических символов в виде иероглифов может быть вызвана несколькими факторами. Один из таких факторов может быть неверной настройкой кодировки при загрузке файла или некорректной обработкой этой кодировки внутри приложения.

Для решения этой проблемы вам потребуется использовать библиотеку PapaParse, которая предоставляет удобные методы для работы с CSV файлами в JavaScript.

В документации PapaParse указано, что он по умолчанию использует кодировку UTF-8 для чтения CSV файлов. Однако, если ваш CSV файл использует другую кодировку, вам может потребоваться явно указать это при чтении файла.

Вот пример кода, который поможет вам правильно импортировать CSV файл с кодировкой Windows-1251 и отображать кириллические символы в вашем реакт приложении:

import React, { useState } from "react";
import { parse } from "papaparse";
import { FilePicker } from "react-file-picker";

const CsvImporter = () => {
  const [csvData, setCsvData] = useState([]);

  const handleFileSelect = (file) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      const csvString = event.target.result;
      const { data, errors } = parse(csvString, {
        encoding: "UTF-8", // Используйте "Windows-1251" для кодировки Windows-1251
      });

      if (errors.length > 0) {
        console.error("Ошибка при чтении CSV файла:", errors);
      } else {
        setCsvData(data);
      }
    };
    reader.readAsText(file);
  };

  return (
    <div>
      <FilePicker
        extensions={["csv"]}
        onChange={handleFileSelect}
      >
        Выберите файл CSV
      </FilePicker>

      {csvData.length > 0 && (
        <table>
          <thead>
            <tr>
              {csvData[0].map((header, index) => (
                <th key={index}>{header}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {csvData.slice(1).map((row, rowIndex) => (
              <tr key={rowIndex}>
                {row.map((cell, cellIndex) => (
                  <td key={cellIndex}>{cell}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
};

export default CsvImporter;

Обратите внимание на использование FileReader для чтения содержимого файла и передачи его в parse метод из библиотеки PapaParse. Здесь я явно указал кодировку UTF-8, но вы можете изменить ее на "Windows-1251" или другую кодировку, которая соответствует вашему CSV файлу.

После успешного импорта и обработки CSV файла, данные представлены в виде таблицы, где каждая строка файла представлена в виде отдельной строки таблицы.

Надеюсь, что это поможет вам решить проблему импорта CSV файлов с кириллицей в вашем реакт приложении с помощью библиотеки PapaParse.