将.csv文件解析为数组(React)

fcwjkofz 于 2023-05-04 发布在 React

关注(0)|答案(1)|浏览(179)

所以我得到了这个.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;

我的数组总是空的，当我尝试这个。

csv

来源：https://stackoverflow.com/questions/76142898/parsing-csv-file-into-an-array-react

1条答案

按热度按时间

xmd2e60i1#

我自己生成了一些模拟数据来测试你的代码，发现了一些bug：

您没有在WordCloud组件中导入csv文件，这是数组为空的部分原因。像这样导入：

import MOCK_DATA from "./data/MOCK_DATA.csv";

你的data object是用一个空数组初始化的，所以当你尝试.map它时，它会Map0个元素，所以它有效地跳过了这段代码：

const words = data
        .map((d) => ({
            text: d.mots.toString(),
            value: parseInt(d.occurrences)
        }))
        .slice(0, 30);

下面是完整的代码：

import React, { useState, useEffect } from "react";
import { csv } from "d3-fetch";
import ReactWordcloud from "react-wordcloud";
import { csvParse } from "d3-dsv";
import MOCK_DATA from "./data/MOCK_DATA.csv";

function WordCloud({ id }) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  let fileName = "";

  if (id === "0") {
    fileName = MOCK_DATA;
  } else {
    fileName = MOCK_DATA;
  }

  useEffect(() => {
    setLoading(true);

    csv(fileName)
      .then((text) => {
        const words = text
          .map((d) => ({
            text: d.word.toString(),
            value: parseInt(d.occurrence)
          }))
          .slice(0, 30);

        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;

希望这对您有帮助：）在codesandbox.io上查看

赞(0）回复(0）举报 2023-05-04

我来回答

将.csv文件解析为数组(React)

1条答案

相关问题

热门标签

最新问答