Question

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

这是我到目前为止所得到的：

#include <iostream>
#include <string>

int main()
{
    std::string selection;
    std::cout << "A. option 1";
    std::cout << "B. option 2";
    std::cin >> selection;

    if(selection == "A") {
        //do whatever;
    } else if(selection == "B") {
        //do something else;
    } else {
        //repeat the prompt
    }
return 0;
}

我知道我无法将<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <title>Ilan's Test</title> <style> .pac-container { z-index: 9999; } </style> </head> <body>  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch Map </button>  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Ilan's Map</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div> <div id="mlogo" style="background-color:#FFFFFF;"> <center><a href="http://www.reviewsmaker.com" target="_new"><img src="https://dcnetworks.ie/wp/wp-content/uploads/2017/11/placeholder-logo-2.png" style="z-index:9999;"></a></center> </div> <input id="pac-input" class="controls" type="text" placeholder="Search Box" style="z-index:9999;"> </div> <div class="container" id="map-canvas" style="height:300px;z-index:9995;"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script> </body> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=AIzaSyAxBhvzi2eGU7HbBb5cNw5lAkb1eODMG3s"></script> <script> function init() { var map = new google.maps.Map(document.getElementById('map-canvas'), { center: { lat: 12.9715987, lng: 77.59456269999998 }, zoom: 12 }); var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input')); map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('pac-input')); map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(document.getElementById('mlogo')); google.maps.event.addListener(searchBox, 'places_changed', function() { searchBox.set('map', null); var places = searchBox.getPlaces(); var bounds = new google.maps.LatLngBounds(); var i, place; for (i = 0; place = places[i]; i++) { (function(place) { var marker = new google.maps.Marker({ position: place.geometry.location }); marker.bindTo('map', searchBox, 'map'); google.maps.event.addListener(marker, 'map_changed', function() { if (!this.getMap()) { this.unbindAll(); } }); bounds.extend(place.geometry.location); }(place)); } map.fitBounds(bounds); searchBox.set('map', map); map.setZoom(Math.min(map.getZoom(), 12)); }); } google.maps.event.addDomListener(window, 'load', init); </script> </html> <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <title>Ilan's Test</title> <style> .pac-container { z-index: 9999; } </style> </head> <body>  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch Map </button>  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Ilan's Map</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div> <div id="mlogo" style="background-color:#FFFFFF;"> <center><a href="http://www.reviewsmaker.com" target="_new"><img src="https://dcnetworks.ie/wp/wp-content/uploads/2017/11/placeholder-logo-2.png" style="z-index:9999;"></a></center> </div> <input id="pac-input" class="controls" type="text" placeholder="Search Box" style="z-index:9999;"> </div> <div class="container" id="map-canvas" style="height:300px;z-index:9995;"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script> </body> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=AIzaSyAxBhvzi2eGU7HbBb5cNw5lAkb1eODMG3s"></script> <script> function init() { var map = new google.maps.Map(document.getElementById('map-canvas'), { center: { lat: 12.9715987, lng: 77.59456269999998 }, zoom: 12 }); var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input')); map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('pac-input')); map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(document.getElementById('mlogo')); google.maps.event.addListener(searchBox, 'places_changed', function() { searchBox.set('map', null); var places = searchBox.getPlaces(); var bounds = new google.maps.LatLngBounds(); var i, place; for (i = 0; place = places[i]; i++) { (function(place) { var marker = new google.maps.Marker({ position: place.geometry.location }); marker.bindTo('map', searchBox, 'map'); google.maps.event.addListener(marker, 'map_changed', function() { if (!this.getMap()) { this.unbindAll(); } }); bounds.extend(place.geometry.location); }(place)); } map.fitBounds(bounds); searchBox.set('map', map); map.setZoom(Math.min(map.getZoom(), 12)); }); } google.maps.event.addDomListener(window, 'load', init); </script> </html>的值设置为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> ) } }（一个json对象）。有更好的方法吗？返回函数中jsonlist的值始终为null。我该怎么办？

此网页的

csv文件内容：

jsonlist

有人可以给我一个使用axios而不是jquery的示例吗？

Answer 1

根据评论改写答案。

您可能正在寻找类似的东西。

我不知道应该怎么称呼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>
        );
    }
}

带有csv文件作为数据库的Reactjs网页

1 个答案: