0

我想检查从 JSON 服务器检索到的数据是否与ReactJS. 我PrimeReact用来画画table，graph这是我的代码：

import React from 'react';
import {DataTable} from 'primereact/datatable';
import {Column} from 'primereact/column';
import {Dialog} from 'primereact/dialog';
import {Button} from 'primereact/button';
import {Chart} from 'primereact/chart';
import './style.css';

export default class TerminalData extends React.Component {

    constructor() {
        super();
        this.state = {
            isLoaded: false,
            visible: false
        };
    }

    componentDidMount() {
        fetch('https://api.myjson.com/bins/80ao2')
        .then((response) => response.json())
        .then((findresponse) =>{
            this.setState({ 
                jsonData: findresponse.root,
                isLoaded: true
             })
        })
    }

    onClick() {
        this.setState({ visible: true });
    }

    onHide() {
        this.setState({visible: false});
    }

    displaySelection(data) {
        if(!data || data.length === 0) {
            return <div style={{textAlign: 'left'}}>Click any above to view details</div>;
        }
        else {
            if(data instanceof Array)
                return <ul style={{textAlign: 'left', margin: 0}}>{data.map((browseData,i) => <li key={browseData.serialNo}>{'Blocked URLs: ' + browseData.blockedURLs + ' ,Unblocked URLs: ' + browseData.UnblockedURLs + ' ,Other URLs: ' + browseData.otherURLs}</li>)}</ul>;
            else
                return <div style={{textAlign: 'left'}}>Selected user: {data.blockedURLs+ ' - ' + data.UnblockedURLs + ' - ' + data.otherURLs }</div>
        }
    }

    render() {
        let sarjapur=0,kodathi=0,ec=0,whitefield=0;

        const barData = {
            labels: ['Sarjapur', 'Kodathi', 'EC', 'WhiteField'],
            datasets: [
                {
                    label: 'Dataset',
                    backgroundColor: '#42A5F5',
                    data: [sarjapur,kodathi,ec,whitefield]
                }
            ]    
        };

        if(this.state.isLoaded === true)
        {
            for (let i = 0; i < this.state.jsonData.length; i++)
            {
                if(this.state.jsonData[i].location === "Sarjapur")
                {
                    sarjapur = sarjapur++;
                }
                else if(this.state.jsonData[i].location === 'Kodathi')
                {
                    kodathi =  kodathi++;
                }
                else if(this.state.jsonData[i].location === 'EC')
                {
                    ec = ec++;
                }
                else if(this.state.jsonData[i].location === 'WhiteField')
                {
                    whitefield = whitefield++;
                }
            }
            console.log("location" +sarjapur + kodathi + ec + whitefield);
        }

        return (
            <div>
                { this.state.isLoaded ? 
                    <div>
                    <DataTable value={this.state.jsonData} selectionMode="single" footer={this.displaySelection(this.state.selectedUser1)}
                    selection={this.state.selectedUser1} onSelectionChange={e => this.setState({selectedUser1: e.value.user_activity})}>
                    <Column field="serialNo" header="Serial No." />
                    <Column field="userName" header="Username" />
                    <Column field="location" header="Location" />
                    </DataTable>

                    <Dialog header="Chart" visible={this.state.visible} style={{width: '40vw'}} onHide={this.onHide.bind(this)} maximizable>
                        <Chart type="bar" data={barData} />
                    </Dialog>
                    <Button label="Show Chart" icon="pi pi-external-link" onClick={this.onClick.bind(this)} />   
                    </div>
                    : "Loading... Please Wait"} 
            </div>
        );
    }
}

见IF condition block

我正在检查使用If条件，但它不起作用并输出0。我使用console.log(this.state.jsonData[1].location);我从 Json 获取它的值单独检查，但是当我比较它时，如果条件失败。我也尝试过，setting state而不是使用var相同的结果。如果有人想看的话，这里是 JSON 数据http://myjson.com/80ao2。

我想要实现的是特定单词出现的频率并根据该绘制图同时增加计数。如何做到这一点？或者这不是一个好方法吗？如果我能做到这一点，请提出更好的方法？

4

1 回答 1

3

问题是你没有正确地做增量

sarjapur++ // post-increment

change it to 

++sarjapur // pre-increment
于 2020-01-31T05:57:11.137 回答