React 基于 api 响应渲染 Chart.js [英] React render Chart.js based on api response

问题描述

我正在使用 reacts 和 chart.js，以及 chart-js/react 包装器.我从 API 动态提取数据，然后根据返回的数据绘制图表.问题是它只是 API 调用中显示在图表中的一个名称.应该是三个名字.

我认为问题在于 Graph 组件的渲染是在 API 返回所有数据之前渲染的，因此该图仅包含名字.至少这是我的想法.我曾尝试使用 componentWillMount 函数，但无法使其正常工作.

谁能发现我下面的代码有什么问题?

var App = React.createClass({获取初始状态:函数(){返回 {名称:[]}},组件DidMount:函数(){$.get(url, 函数(数据) {this.setState({ 名称:数据 })}.bind(this));},渲染:函数(){返回(
<图表名称={this.state.names}/></div>)}});var Graph = React.createClass({渲染:函数(){for(var i = 0; i < this.props.names.length; i++) {names.push(this.props.names[i].name)}var 图表数据 = {标签:名字，数据集:[{数据:目标},{数据:预测}]};返回 <LineChart 数据={chartData} width="600" height="250"/>}});

解决方案

你必须像下面这样控制你的状态:

var App = React.createClass({获取初始状态:函数(){返回 {名称:[]，已加载:假}},组件DidMount:函数(){$.get(url, 函数(数据) {这个.setState({名称:数据，已加载:真})}.bind(this));},渲染:函数(){返回(
{this.state.isLoaded ?<图表名称={this.state.names}/>: <div>Still Loading... </div>}</div>)}});

因此，一旦您获得所有数据，您就可以渲染图表，否则会显示加载屏幕.看看这个 链接 可能对你有帮助.希望它对你有意义.

I am using reacts and chart.js, and the chart-js/react wrapper. I am dynamically pulling the data from an API and then basing the chart on the data returned. The issue is that it is only one name from the API call that is being displayed in the graph. There should be three names.

I think the problem is that the rendering of the Graph component is being rendered before all the data has been returned by the API, so the graph only contains the first name. At least this is what i think. I have tried working with the componentWillMount function but cannot get it working.

can anyone spot anything wrong with my code below?

var App = React.createClass({

    getInitialState: function(){
        return {
            names: []
        }
    },

    componentDidMount: function() {
        $.get(url, function (data) {
            this.setState({ names: data })
        }.bind(this));
    },

    render: function() {
        return(
            <div>
                <Graph names={this.state.names}/>               
            </div>
        )
    }
});

var Graph = React.createClass({

    render: function() {
        for(var i = 0; i < this.props.names.length; i++) {
            names.push(this.props.names[i].name)
        }
        var chartData =  {
            labels: names,
            datasets: [{
                   data: goals
                },
                {
                    data: predictions
                }]
        };
        return <LineChart data={chartData} width="600" height="250"/>
    }
});

解决方案

You have to control your state like below:

var App = React.createClass({
    getInitialState: function(){
        return {
            names: [],
            isLoaded: false
        }
    },
    componentDidMount: function() {
        $.get(url, function (data) {
            this.setState({ 
                names: data,
                isLoaded: true
            })
        }.bind(this));
    },
    render: function() {
        return(
            <div>
                {this.state.isLoaded ? <Graph names={this.state.names}/> : <div>Still Loading... </div> }
            </div>
        )
    }
});

So once you get all your data you can render your chart otherwise show the loading screen. Take a look at this Link probably it will be helpfull for you. Hope it makes sense for you.

这篇关于React 基于 api 响应渲染 Chart.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！