Удалить кавычки и запятые из строки данных в React

Я написал цитату для передачи данных в таблицу и функцию кнопки для загрузки всей таблицы. Однако, когда мы открываем загруженный файл с помощью заметок или текстового редактора, он возвращает несколько двойных кавычек и запятых, которые я хочу удалить. Ниже мой код:

import { CSVLink } from "react-csv";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import { Hidden } from "@mui/material";

const current = new Date();

  const date = `${current.getFullYear().toString().slice(-2)}.${''+current.getMonth()+1}.${current.getDate()}`;
  const yymmdd = `${current.getFullYear()}${''+current.getMonth()+1}${current.getDate()}`;
  const timestamp = `${current.getFullYear()}.${''+current.getMonth()+1}.${current.getDate()}`;
  const yesterday = `${current.getDate()-1}.${current.getMonth()+1}.${current.getFullYear()}`;
  const dynamicdate = `${current.getDate()}.${current.getMonth}.${current.getFullYear()}`;
  const hourminutesecond = `${current.getHours()}:${(current.getMinutes()<10?'0':'')+current.getMinutes()}:${(current.getSeconds()<10?'0':'')+current.getSeconds()}`;

function createData(misc, status, amount, balance, standard){
  return {misc, status, amount, balance, standard}
};

const rows = [
  createData("ブラジル銀行"),
  createData(`${timestamp}  BBコーポレートバンキング   ${hourminutesecond}`),
  createData('" "'),
  createData(`""`),
  createData(`" "`),
  createData(`""`),
  createData(`"総合預金明細書"`),
  createData(`""`),
  createData("TOKYO"),
  createData(`""`),
  createData("ACCOUNT NUMBER :    480330-0"),
  createData(`""`),
  createData(`"預金残高"`),
  createData(`"                                                                                                    "`),
  createData(`"口座種目"`,'レアル','ユーロ','USドル','円'),
  createData(`"普通預金"`,`"                 "`,`"                 "`,`"                 "`,"412,000"),
  createData(`"合計残高"`,`"                 "`,`"                 "`,`"                 "`,"412,000"),
  createData(`"                                 "`,`"                 "`,`"                 "`,`"                 "`,`"                 "`),
  createData(`"明細"`),
  createData(`"                                 "`,`"                 "`,`"                 "`,`"                 "`,`"                 "`),
  createData(`"普通預金 円"`),
  createData(`"年月日"`,'摘要','元本','差引残高',''),
  createData(`"            "`,`"前残高"`,`"                 "`,`"6,467,000 "`),
  createData(`${date}`,'入金           ',`"         2,000"`,`"     6,489,000  "`),
  createData(`"            "`,`${yymmdd}-160538Deposit Card No.0077596-5 @9900 9910466 `,`"                 "`,`"                "`),
];
  
  export default function Transactions() {
    return (
      <div className = "px-4 sm:px-6 lg:px-8 h-screen select-none p-4">
        <div className = "sm:flex sm:items-center">
          <div className = "sm:flex-auto">
            <h1 className = "text-xl font-semibold text-gray-900">Transactions</h1>
            <p className = "mt-2 text-sm text-gray-700">
             Transactions passed through the rubilink network
            </p>
          </div>
          <div className = "mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
          <div className = "w-20 h-10 bg-blue-600 text-center justify-center align-middle hover:bg-blue-400 cursor-pointer ease-in-out duration-300 border rounded-lg p-1">
            <CSVLink className = "text-center justify-center align-middle font-semibold text-sm text-white" data = {rows} filename = {`${current.getFullYear()} ${(current.getMonth()<10?'0':'')+1}${current.getDate()} ${(current.getHours()<10?'0':'') + current.getHours()}${(current.getMinutes()<10?'0':'') + current.getMinutes()}週末.csv`}>
                Download
            </CSVLink>
          </div>
          </div>
        </div>
        <div className = "mt-8 flex flex-col">
          <div className = "-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div className = "inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
              <div className = "overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                <TableContainer component = {Paper}>
                  <Table sx = {{ minWidth: 650 }} aria-label='transactions'>
                    <TableBody>
                      {rows.map((row) => (
                        <TableRow
                        key = {row.name}
                        sx = {{ '&:last-child td, &:last-child th': { border: 0 } }}
                        >
                          <TableCell headers = "hidden">
                            {row.misc}
                          </TableCell>
                          <TableCell align = "left" headers = "hidden">
                            {row.status}
                          </TableCell>
                          <TableCell align = "left" headers = "">
                            {row.amount}
                          </TableCell>
                          <TableCell align = "left" headers = "">
                            {row.balance}
                          </TableCell>
                          <TableCell align = "left" headers = "">
                            {row.standard}
                          </TableCell>
                        </TableRow>
                      ),
                       
                      )}
                    </TableBody>
                  </Table>
                </TableContainer>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

Есть ли способ удалить несколько кавычек и запятых в конце каждой строки данных?

"когда мы открываем загруженный файл с помощью заметок или текстового редактора" - ну просто не надо. Откройте его с помощью приложения для работы с электронными таблицами.

Bergi 30.01.2023 04:07
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать

yourString.replaceAll('"', ''); to remove quote from your string
yourString.replaceAll(',', ''); to remove com from your string

Спасибо за понимание! В этом случае я использую не строку, а константные строки. Это работает, если я делаю rows.replaceAll?

htrgotoh 30.01.2023 04:03

Вы можете использовать replaceAll в своей TableCell, потому что ваш row.key вернет строку, и вы можете использовать этот метод.

twin.traiwin 30.01.2023 04:21

или, может быть, вы можете replaceAll в своей функции createData со всеми вашими параметрами, отправленными в эту функцию

twin.traiwin 30.01.2023 04:23

Спасибо! Не могли бы вы показать, как я могу передать его в функцию createData?

htrgotoh 30.01.2023 04:27

function createData(разное, статус, количество, баланс, стандарт){ разное = разное.removeAll('"', '') status = status.removeAll('"', '') количество = количество.removeAll('"', '') balance = balance.removeAll('"', '') standard = standard.removeAll('"', '') return {разное, статус, сумма, баланс, стандарт} };

twin.traiwin 30.01.2023 04:36

это должно пригодиться. Надеюсь, это поможет :)

twin.traiwin 30.01.2023 04:39

Спасибо! На самом деле возвращает replaceAll, это не функция. Очень смущенный

htrgotoh 30.01.2023 05:04

Я проверил это на себе, и это работает. Я просто заметил, что мой ответ на комментарий был неправильным с опечаткой с «replaceAll» на «removeAll», если вы скопируете код, попробуйте изменить его и повторить попытку: 0

twin.traiwin 30.01.2023 07:04

Большое спасибо! Не могли бы вы поделиться своим кодом? Я попытался последовать вашему совету, но, похоже, он не возвращает функцию.

htrgotoh 30.01.2023 10:44

Давайте продолжим обсуждение в чате.

htrgotoh 30.01.2023 16:02

Другие вопросы по теме