所以我得到了这个.csv文件,其中的值是这样写的:
mots;occurrences franc;法国424人;234欧元;233支付;165个国家;164个部分;欧洲153个;发送150个;146 faire;137 français;134次分娩;133 port;128 monde;124个堡垒;124个同胞;一百二十...
(mots(& occurrences是列,每个值都在它们下面)
我需要在我的react组件中转换/解析这个文件,以便创建一个看起来像这样的数组(命名为words):
const words = [ { text:'told',值:64,},{ text:“错误”,值:11,},{ text:'thought',value:16,},{ text:'bad',值:17,},]
有人能帮我在React.js中做到这一点吗?
我试过了,但它总是显示错误:
import React, { useState, useEffect } from "react";
import { csv } from "d3-fetch";
import ReactWordcloud from "react-wordcloud";
import { csvParse } from "d3-dsv";
function WordCloud({ id }) {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
let fileName = "";
if (id === "0") {
fileName = "./data/1974-2022.csv";
}
else {
fileName = "./data/1974-2022.csv";
}
useEffect(() => {
setLoading(true);
csv(fileName)
.then(text => {
const words = data.map(d => ({ text: d.mots.toString(), value: parseInt(d.occurrences) })).slice(0, 30);
console.log(words)
setData(words);
setLoading(false);
})
.catch(error => console.log(error));
}, [fileName]);
if (loading) {
return <div>Loading...</div>;
}
return (
<div>
<ReactWordcloud words={data}/>
</div>
);
}
export default WordCloud;
我的数组总是空的,当我尝试这个。
1条答案
按热度按时间xmd2e60i1#
我自己生成了一些模拟数据来测试你的代码,发现了一些bug:
data object
是用一个空数组初始化的,所以当你尝试.map
它时,它会Map0个元素,所以它有效地跳过了这段代码:下面是完整的代码:
希望这对您有帮助:)在codesandbox.io上查看