React通过静态链接（按钮）读取CSV文件异常问题排查

你的CSV文件用**分号(;)**做分隔符，但d3.csv默认只认逗号(,)，这就导致解析时把整行当成单个字段，返回的结果只有1列，完全不符合预期。另外前几列的空值也需要正确处理，下面给两种解决办法：

方案1：修正d3的读取逻辑（指定分隔符） #

用d3.dsv替代d3.csv，明确指定分隔符为分号就行：

import { dsv } from "d3";

const file = "/dummydata/template.csv";

const readCsv = () => {
  dsv(';', file).then(function (data) {
    console.log(data);
    // 现在会正确解析出Bereitstellung、Beginn等所有字段，空值也会保留为空字符串
  });
};

解析后的数据示例：

[
  {
    Bereitstellung: "",
    Beginn: "",
    Mitarbeiter: "",
    Ende: "",
    "Wagen ": "109",
    Sollzeit: "21:45"
  },
  // ...其余行数据
]

方案2：原生JS实现（完全不用额外模块） #

如果要彻底摆脱第三方依赖，用原生Fetch API读文件再手动解析CSV：

const file = "/dummydata/template.csv";

const readCsv = async () => {
  try {
    const response = await fetch(file);
    const csvText = await response.text();
    
    // 手动解析CSV内容
    const lines = csvText.split('\n').filter(line => line.trim());
    const headers = lines[0].split(';').map(h => h.trim());
    const data = lines.slice(1).map(line => {
      const values = line.split(';');
      return headers.reduce((obj, header, idx) => {
        obj[header] = values[idx] || '';
        return obj;
      }, {});
    });
    
    console.log(data);
  } catch (err) {
    console.error('读取CSV出错:', err);
  }
};

这个方法手动处理分号分隔，空值会被处理成空字符串，结果和修正后的d3方案一致，而且完全不需要任何第三方库，符合你“不使用额外模块”的需求。

内容的提问来源于stack exchange，提问作者General Warmonger