Javascript 以csv文件作为数据库的Reactjs网页

目前，我使用Reactjs作为我网站的前端，使用csv文件作为我的后端数据库（不要问为什么，这是必要的）。我创建了一个本地http web服务器（用Python编写），它可以按预期工作。我的问题是如何将csv文件中每个单元格的内容放入一个变量（或多个变量）中，并将它们显示在我希望它们出现在网页上的任何位置？变量范围似乎有问题

以下是我目前得到的信息：

import React, { Component } from "react";
import $ from 'jquery';

function getData (data) {
    this.id = data.id;
    this.name = data.name;
    this.age = data.age;
}

export default class Profile extends Component {
    constructor (props) {
        super(props);
        this.state = {
            jsonlist: null,
            isNull: true
        }
        this.onClick = this.handleClick.bind(this);
    }

    handleClick() {
        var jl;
        $.post("http://127.0.0.1:8080",
        function(json){
            var parsed = JSON.parse(json);
            jl = parsed.list.map(function(data){
                return new getData(data);
            });
            this.setState(
                isNull: false,
                jsonlist: jl
            );
        });
    }

    render() {
        return (
            <div>
                <button onClick = {this.onClick}>GET CONTENT</button>
                { this.state.isNull
                    ? null
                    :
                     <ul>
                         <div>name: { this.state.jsonlist["0"].name } </div>
                         <div>age: { this.state.jsonlist["0"].age } </div>
                     </ul>
                }
            </div>
        )
    }
}

---

有人能给我举一个使用axios而不是jquery的例子吗？根据评论重写答案

你可能在找这样的东西

但是，我不知道应该调用什么

loadData

/

onClick

，因为它在原始代码中没有引用

另外，您不应该使用jQuery来做AJAX；查看

fetch（）

，或者查看

axios

库

import React, { Component } from "react";
import $ from 'jquery';

export default class Profile extends Component {
    constructor (props) {
        super(props);
        this.state = {jsonlist: null};
        this.onClick = () => {
            this.loadData();
        };
    }

    loadData() {
        var jl;
        $.post("http://127.0.0.1:8080", (json) => {
            var parsed = JSON.parse(json);
            this.setState({
                jsonlist: parsed.list,
            });
        });
    }

    render() {
        const {jsonlist} = this.state;
        return (
            <ul>
                {(jsonlist || []).map((item) => (
                    <li key={item.id}>
                        name = {item.name}, age = {item.age}
                    </li>
                ))}
            </div>
        );
    }
}

import React，{Component}来自“React”；
从“jquery”导入美元；
导出默认类配置文件扩展组件{
建造师（道具）{
超级（道具）；
this.state={jsonlist:null}；
this.onClick=（）=>{
这是loadData（）；
};
}
loadData（）{
var-jl；
$.post（”http://127.0.0.1:8080“，（json）=>{
var parsed=JSON.parse（JSON）；
这是我的国家({
jsonlist:parsed.list，
});
});
}
render（）{
const{jsonlist}=this.state；
返回(

{（jsonlist | |[]）.map（（项）=>(

name={item.name}，age={item.age}

))}
);
}
}

jsonlist在我创建这个玩具代码段时只是一个输入错误。我不能显示原始代码，因为它是保密的。你能给我一个没有getData（）的映射的正确版本吗？你真的应该尽可能多地显示原始代码。匿名化需要匿名化的内容，但不要只是将玩具代码发布为“这就是我目前得到的”。这是完全相同的结构。如果您需要，我可以创建一个csv示例。重写答案。

import React, { Component } from "react";
import $ from 'jquery';

export default class Profile extends Component {
    constructor (props) {
        super(props);
        this.state = {jsonlist: null};
        this.onClick = () => {
            this.loadData();
        };
    }

    loadData() {
        var jl;
        $.post("http://127.0.0.1:8080", (json) => {
            var parsed = JSON.parse(json);
            this.setState({
                jsonlist: parsed.list,
            });
        });
    }

    render() {
        const {jsonlist} = this.state;
        return (
            <ul>
                {(jsonlist || []).map((item) => (
                    <li key={item.id}>
                        name = {item.name}, age = {item.age}
                    </li>
                ))}
            </div>
        );
    }
}