Question

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

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

任何人都可以发现我的代码有什么问题吗？

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"/>
    }
});

Answer 1

你必须控制你的状态如下：

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>
        )
    }
});

因此，一旦获得所有数据，您就可以呈现图表，否则会显示加载屏幕。看看这个Link可能会对你有所帮助。希望对你有意义。

React基于api响应呈现Chart.js

1 个答案: