React中解析分号分隔CSV并转为指定结构数组求助

问题说明 #

我有一个分号分隔的CSV文件，结构如下：

mots;occurrences
franc;424
france;368
année;234
euro;233
...

需要在React组件中将其解析为如下结构的数组：

const words = [
  { text: 'franc', value: 424 },
  { text: 'france', value: 368 },
  // ...其他项
];

但当前代码解析后数组始终为空，请求修复。

错误原因 #

1. CSV分隔符不匹配：d3-fetch的csv()方法默认使用逗号作为分隔符，但你的CSV用的是分号，导致解析后的数据结构异常。
2. 错误使用state数据：在then回调里，你用了组件state的data（初始为空数组）来做map，而不是请求返回的响应数据，所以处理后还是空数组。

修复方案 #

步骤1：指定CSV分隔符 #

给csv()方法传入分隔符选项，适配分号分隔的CSV格式。

步骤2：使用请求返回的数据处理 #

在then回调中，用请求回来的响应数据进行映射转换，而非组件初始state的空数组。

完整修复代码 #

import React, { useState, useEffect } from "react";
import { csv } from "d3-fetch";
import ReactWordcloud from "react-wordcloud";

function WordCloud({ id }) {
    const [words, setWords] = useState([]);
    const [loading, setLoading] = useState(true);

    // 简化文件名逻辑（当前分支逻辑一致，直接赋值即可）
    const fileName = "./data/1974-2022.csv";

    useEffect(() => {
        setLoading(true);
        // 指定分号作为CSV分隔符
        csv(fileName, { delimiter: ';' })
            .then(response => {
                // 用请求返回的response数据转换目标结构
                const processedWords = response.map(d => ({
                    text: d.mots,
                    value: parseInt(d.occurrences, 10) // 明确十进制解析规则
                })).slice(0, 30);
                setWords(processedWords);
                setLoading(false);
            })
            .catch(error => {
                console.error('CSV解析失败:', error);
                setLoading(false); // 错误时终止加载状态
            });
    }, [fileName]);

    if (loading) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <ReactWordcloud words={words}/>
        </div>
    );
}

export default WordCloud;

额外优化点 #

• 将state变量名从data改为words，更贴合数据用途；
• 给parseInt添加第二个参数10，避免非十进制解析的意外问题；
• 错误处理中补充日志并终止加载状态，避免页面一直显示加载中。

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